vue textarea限制字符数量_vue教程3

v-model指令

v-model指令的作用是双向绑定数据，它只能用于输入组件，如input、textarea、select、radio等。
需要注意的是，通过v-model绑定的数据都为字符串。

实现一个简单的双向绑定。

JavaScript：

let vm = new Vue({
  el: '#app', // 根元素或挂载点。
  data: {
    name: 'lee',
  }
})

HTML：

{{name}}




此时通过input修改数据，p标签中的数据也会跟着改变，如果通过vm.name直接修改数据，input和p标签中的数据也会改变，如此就实现了双向绑定。

v-model改变了通信方式

v-model让View层与Model层之间的通信不再需要通过Controller进行，这里的Controller指的是用户的代码，而不是Vue的底层代码。

v-text、v-html指令

v-text与{{}}效果相同，如果传入的是标签会直接转换为字符串输出。
v-html相当于innerHtml，会将传入的字符串转换成HTML输出。

但需要注意的是这两个指令的使用前提是内容是可以信任的。

JavaScript：

let vm = new Vue({
  el: '#app', // 根元素或挂载点。
  data: {
    name: 'lee',
  }
})

HTML：