v-bind和v-model的区别
https://segmentfault.com/a/1190000014813168
简单来说,区别如下:
1.v-bind用来绑定数据和属性以及表达式,缩写为':'
2.v-model使用在表单中,实现双向数据绑定的,在表单元素外使用不起作用
一、v-model
v-model多在表单中使用,在表单元素上创建双向绑定,根据控件类型选择正确的方法更新元素,可以绑定text、radio、checkbox、selected
1. 绑定text
<input type="text" v-model="val" />
<p> {{val}} </p>
2. 绑定radio
<input type="radio" value="one" v-model="radioVal" />
<input type="radio" value="two" v-model="radioVal" />
<label for v-bind="radioval" />
radioval的值随着选择单选框的值,会变成one 或者 two
3. 绑定checkBox
(1)单个勾选框,最终的值为逻辑值true和false
<input type="checkbox" v-model="checkVal"/>
<label for="checkbox">{{checkVal}}</label>
(2)多个勾选框时,将值绑定到一个数组
<p v-bind="message"></p>
<p>{{message}}</p>
2.绑定属性
<p v-bind:src="http://...."></p>
<p v-bind:class="http://...."></p>
<p v-bind:style="http://...."></p>
3.绑定表达式
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
4.绑定html
<div>{{{ raw_html }}}</div>
这个时候必须要使用三个{}
参考:https://v1-cn.vuejs.org/guide...
此文章仅仅是整理,在日后的学习和工作中,有新的idea会同步更新。