码迷,mamicode.com
首页 > 其他好文 > 详细

v-model与v-bind

时间:2019-11-05 15:04:22      阅读:77      评论:0      收藏:0      [点我收藏+]

标签:class   inpu   ack   单元素   等等   就是   ted   select   实例   

v-model
我们可以使用 v-model 指令在 <input> (<input> 标签有多种类型,如 button、select 等等)及 <textarea> 元素上进行双向数据绑定。但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。

v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。

v-bind
它的用法是后面加冒号,跟上html元素的属性

例如:

<p v-bind:class="someclass"></p>
如果不加 v-bind 那么 someclass 就是个常量,没有任何动态数据参与。当加上 v-bind 之后,它的值 someclass 不是字符串,而是vue实例对应的 data.someclass 这个变量。具体传入变量类型可参考 Class与Style绑定 。这非常适合用在通过css来实现动画效果的场合。除了class,其他大部分html原始的属性都可以通过这种方式来绑定,而且为了方便,它可以直接缩写成冒号形式,例如<p :class="someclass">

v-bind与v-model区别

<input :value="name" v-model="body">

v-bind 产生的效果不含有双向绑定,所以 :value 的效果就是让 input的value属性值等于 data.name 的值,而 v-model 的效果是使input和 data.body 建立双向绑定,因此首先 data.body 的值会给input的value属性,其次,当input中输入的值发生变化的时候,data.body 还会跟着改变。

v-model与v-bind

标签:class   inpu   ack   单元素   等等   就是   ted   select   实例   

原文地址:https://www.cnblogs.com/huixiao04130202/p/11798464.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!