【Vue】单向和双向数据绑定

在Vue中，数据绑定主要有两种形式：单向绑定（One-way）和双向绑定（Two-way）。

1. 单向绑定（One-way）：数据只能从数据源流向模板，不会从模板返回到数据源。

<!-- 在Vue模板中 -->
<template>
  <div>{{ message }}</div>
</template>
 
<!-- 在Vue组件中 -->
<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}
</script>

2. 双向绑定（Two-way）：数据可以在数据源和模板之间双向流动。

<!-- 在Vue模板中 -->
<template>
  <div>
    <input v-model="userInput" />
    <p>输入的内容是：{{ userInput }}</p>
  </div>
</template>
 
<!-- 在Vue组件中 -->
<script>
export default {
  data() {
    return {
      userInput: ''
    }
  }
}
</script>

在上面的例子中，input 元素和 userInput 属性之间实现了双向绑定，无论是在页面上输入文本，还是在JavaScript代码中修改 userInput 的值，都会同步到视图中。