谈谈对vue的认识2：双向绑定 v-model
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了谈谈对vue的认识2：双向绑定 v-model相关的知识，希望对你有一定的参考价值。
1:v-model指令
数据的双向绑定
双向绑定是说我们不仅仅可以通过数据（M）的改变去影响视图（V），还是当视图的内容改变（V）去影响模型中的数据（M）
通常来说双绑定应用在表单中比较多
指令： vue对html元素拓展是一些属性名称（自定义属性名称）
Vue指令有个特点，都是以v-开头的
V-model，它提供了一个js环境，在他的属性之中我们可以使用js（vue实例化对象）中的变量，将表单元素的值与vue实例化对象中是数据属性同步，实现视图到模型中的数据的一个绑定，因此在表单元素上添加了v-model就实现一种双向绑定
<div id="app">
<input type="text" v-model="msg">
<h1>{{msg }}</h1>
</div>
var myData = {
// 插入的文本
msg: ‘‘
};
// 创建vue对象
var app = new Vue({
el: ‘#app‘,
data: myData
})
//实现了input输入内容和h1的双向绑定
2：类的绑定
第一种 属性插值
Eg:
.red {
color: red;
}
.green {
background: green;
}
<div id="app">
<h1 class="{{cls}}">快乐大本营</h1>
</div>
var app = new Vue({
el: ‘#app‘,
data: {
cls: ‘red green‘
}
})
第二种 v-bind指令
语法 v-bind:class=”{}”
对象的属性名称表示类的名称，他的值是boolean值，
True表示 在该元素上保留该类
False表示在该元素上删除该类
Eg;
.red {
color: red;
}
.green {
background: green;
}
<div id="app">
<h1 v-bind:class="{red: redColor, green: true}">快乐大本营</h1>
</div>
var app = new Vue({
el: ‘#app‘,
data: {
// 属性名称表示写入页面中的变量，属性值，表示对应的类的名称
redColor: true,
}
})
第三种 v-bind指令
语法 v-bind:class = “数组”
数组的每个成员代表了一个类，成员的值就是类的名称
Eg:
.red {
color: red;
}
.green {
background: green;
}
<div id="app">
<h1 v-bind:class="[redColor, ‘green‘]">快乐大本营</h1>
</div>
var app = new Vue({
el: ‘#app‘,
data: {
// 属性名称表示写入页面中的变量，属性值，表示对应的类的名称
redColor: ‘red‘,
}
})
3:样式绑定
第一种 属性插值
Eg:
<div id="app">
<span style="{{styles}}">快乐大本营</span>
</div>
var app = new Vue({
el: ‘#app‘,
data: {
// 通过插值的方式为元素定义样式
styles: ‘color: red‘
}
})
第二种 v-bind指令
语法 v-bind:style=”{}”
对象的属性名称表示css中样式属性名称，如下驼峰式命名fontSize，可以直接书写css的属性要加引号
Eg:
<div id="app2">
<span v-bind:style="{color: clr, background: ‘orange‘, fontSize: ‘40px‘}">
快乐大本营
</span>
</div>
第三种 v-bind指令
语法 v-bind:style = “[]”
数组中每一个成员表示一组css样式，这组样式我们要在绑定的数据中定义它
Eg:
<div id="app3">
<span v-bind:style="[font, color]">快乐大本营</span>
</div>
var app3 = new Vue({
el: ‘#app3‘,
data: {
color: {
color: ‘red‘,
background: ‘yellow‘
},
font: {
fontSize: ‘30px‘,
fontWeight: ‘bold‘
}
}
})
以上是关于谈谈对vue的认识2：双向绑定 v-model的主要内容，如果未能解决你的问题，请参考以下文章