这次给大家带来怎样操作vue.js数据绑定，操作vue.js数据绑定的注意事项有哪些，下面就是实战案例，一起来看一下。
数据绑定
响应式的数据绑定系统。建立绑定之后，DOM将和数据保持同步，无须手动维护DOM。使代码能够更加简洁易懂、提升效率。
数据绑定语法
1.文本插值
{{ }}Mustache标签
<span>Hello {{ name }}</span>data:{
name: 'vue'
}
== > Hello vue单次插值
首次赋值后再更改vm实例属性值不会引起DOM的变化
<span v-once="name">{{ name }}</span>2.HTML属性
Mustache标签{{ }}
<p v-bind:id="'id-'+id"></p>
简写：
<p :id="'id-'+id"></p>
3.绑定表达式
放在Mustache标签内的文本内容。除了直接输出属性值之外，一段绑定表达式可以由一个简单的JavaScript表达式和可选的一个或多个过滤器构成(不支持正则表达式，若需要复杂的转换，则使用过滤器或者计算属性来进行处理)。
{{ index + 1}}
{{ index == 0 ? 'a' : 'b' }}
{{name.split('').join('|') }}
{{ var a = 1 }} //无效4.过滤器
vue.js允许在表达式后添加可选的过滤器，以管道符"|"指示。
{{ name | uppercase }} // Vue.js将name的值传入给uppercase这个内置的过滤器中(本质是一个函数)，返回字符串的大写值。
{{ name | filterA | filterB }} //多个过滤器链式使用
{{ name | filterA arg1 arg2 }} //传入多个参数此时，filterA将name的值做为第一个参数，arg1，arg2做为第二、第三个参数传入过滤器函数中。
最终函数的返回值即为输出结果。arg1，arg2可以使用表达式，也可以加上单引号，直接传入字符串。
例如：
{{ name.split('') | limitBy 3 1 }} // ->u,e过滤器limitBy可以接受两个参数，第一个参数是设置显示个数，第二个参数为可选，指从开始元素的数组下标。
vue.js内置的10个过滤器(Vue.js2.0中去除)
capitalize：字符串首字符转化为大写。
uppercase：字符串转化为大写。
lowercase：字符串转化为小写。
currency：参数为｛String｝[货币符号]，{Number}[小数位]，将数字转化成货币符号，并且会自动添加数字分节号。
{{ amount | currency '￥' 2 }} //若amount值为1000，则输出为￥1,000.00pluralize：参数为{String}single,[double,triple],字符串复数化。
<p v-for="c in count">{{ c | pluralize 'item' }} {{ c | pliralize 'st' 'nd' 'rd' 'th' }} </p>//输出结果： 1item 1st 2items 2nd 3items 3rd 4items 4th
json：参数为{Number}[indent]空格缩进数，将json对象数据输出成符合json格式的字符串。
debounce：传入值必须是函数，参数可选，为{Number}[wait]，即延时时长。作用是当调用函数n毫秒后，才会执行该动作。
<input v-on:keyup="onKeyup | debounce 500"> //input元素上监听了keyup事件，并且延迟500ms触发
limitBy：传入值必须是数组，参数为{Number}limit，{Number}[offset]，limit为显示个数，offset为开始显示数组下标。
<p v-for="item in items | limitBy 10"></p> //items为数组，且只显示数组中的前十个元素
filterBy：传入值必须是数组，参数为{String | Function}targetStringOrFunction,即需要匹配的字符串或函数；"in"可选分隔符。{String}[...searchKeys]，为检索的属性区域。
<p v-for="name in names | filterBy '1.0'">{{ name }}</p> //检索names数组中值包含1.0的元素
<p v-for="item in items | filterBy '1.0' in 'name'">{{ item | json }}</p> //检索items中元素属性name值为1.0的元素输出。检索区域也可以为数组，即in [name,version],在多个属性中进行检索。//输出结果
vue1.0
{"name":"vue1.0","version":"1.0"}使用自定义的过滤函数，函数可以在选项methods中定义
<p v-for="item in items | filterBy customFilter"
methods:{
cuestomFilter:function(item){
if(item.name) return true; //检索所有元素中包含name属性的元素
}
}orderBy:传入值必须是数组，参数为{String|Array|Function}sortKeys,即指定排序的策略。
单个键名：
<p v-for="item in items | orderBy 'name' -1">{{ item.name}}</p> //items数组中以键名name进行降序排列多个键名：
<p v-for="item in items | orderBy [name,version]">{{item.name}}</p> //使用items里的两个键名进行排序自定义排序函数：
<p v-for="item in items | orderBy customOrder">{{item.name}}</p>
methods:{
customOrder: function(a,b){
return parseFloat(a.version) > parseFloat(b.version) //对比item中version的值的大小进行排序
}
}5.指令
指令的值限定为绑定表达式，即当表达式的值发生改变时，会有些特殊行为作用到绑定的DOM上。
参数：src为参数
<img v-bind:src="avatar" /> <==> <img src="{{avatar}}" />修饰符：以半角句号.开始的特殊后缀，用于表示指令应该以特殊方式绑定。
<button v-on:click.stop="doClick"></button> //stop:停止冒泡。相当于调用了e.stopPropagagation().
计算属性
避免在模板中加入过重的业务逻辑，保证模版的结构清晰和可维护性。
1.基础例子
var vm = new Vue({
el: '#app',
data: {
firstName:'Gavin',
lastName:'CLY'
},
computed: {
fullName:function(){
//this指向vm实例
return this.firstName + ' ' + this.lastName;
}
}
})<p>{{ firstName }}</p> //Gavin
<p>{{ lastName }}</p> //CLY
<p>{{ fullName }}</p> //Gavin CLY注：此时对vm.firstName和vm.lastName进行修改，始终会影响vm.fullName。
2.Setter
更新属性时带来便利
var vm = new Vue({
el:'#el',
data:{
cents:100
},
computed:{
price:{
set:function(newValue) {
this.cents = newValue * 100;
},
get:function(){
return (this.cents / 100).toFixed(2);
}
}
}
})表单控件
v-model：对表单元素进行双向数据绑定，在修改表单元素值时，实例vm中对应的属性值也同时更新，反之亦然。
var vm = new Vue({
el:'#app',
data: {
message: '',
gender: '',
cheched: '',
multiChecked: '',
a: 'checked',
b: 'checked'
}
})1. Text
输入框示例，用户输入的内容和vm.message直接绑定：
<input type="text" v-model="message" />
<span>Your input is : {{ message }} </span>2. Radio
单选框示例：
<label><input type="radio" value="male" v-model="gender">男</lable>
<label><input type="radio" value="famale" v-model="gender">女</lable>
<p>{{ gender }}</p> //显示的是value值3.Checkbox
单个勾选框，v-model即为布尔值，此时Input的value并不影响v-model的值。
<input type="checkbox" v-model="checked" />
<span>checked: {{ checked }} </span> //显示的是true/false多个勾选框，v-model使用相同的属性名称，且属性为数组。
<label><input type="checkbox" value="1" v-model="multiChecked">1</label>
<label><input type="checkbox" value="1" v-model="multiChecked">2</label>
<label><input type="checkbox" value="1" v-model="multiChecked">3</label>
<p>MultiChecked:{{ multiChecked.join{'|'} }}</p> //multiChecked:1|24.Select
单选
<select v-model="selected">
<option selected>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>多选
<select v-model="multiSelected" multiple>
<option selected>A</option>
<option>B</option>
<option>C</option>
</select>
<span>MultiSelected: {{ multiSelected.join('|') }}</span>5.绑定value
通过v-bind实现，表单控件的值绑定到Vue市里的动态属性上。
Checkbox
<input type="checkbox" v-model="checked" v-bind:true-value="a" v-bind:false-value="b" />
选中：
vm.checked == vm.a //=> true
未选中：
vm.checked == vm.b //=>true
Radio
<input type="radio" v-model="checked" v-bind:value="a" >
选中：
vm.checked == vm.a //=> true
3.Select Options
<select v-model="selected">
<!-- 对象字面量 -->
<option v-bind:value="{ number:123}">123</option>
</select>选中：
typeof vm.selected //=> object vm.selected.number //=> 123
6.参数特性
.lazy:默认情况下，v-model在input事件中同步输入框与数据，加lazy属性后会在change事件中同步。
<!-- 在 "change" 而不是 "input" 事件中更新 --> <input v-model.lazy="msg" >
.number:自动将用户输入转为Number类型，如果原值转换结果为NaN，则返回原值。
<input v-model.number="age" type="number">
.trim:如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入
<input v-model.trim="msg">
Class与Style绑定
1.Class绑定
对象语法：v-bind:class接受参数是一个对象，而且可以与普通的class属性共存。
<p class="tab" v-bind:class="{'active':active,'unactive':!active}"></p>vm实例中需要包含：
data：{
active:true
}渲染结果为：
<p class="tab active"></p>
数组语法：v-bind:class也接受数组作为参数。
<p v-bind:class="[classA,classB]"></p>
vm实例中需要包括：
data:{
classA:"class-a",
classB:"class-b"
}渲染结果为：
<p class="class-a class-b"></p>
使用三元表达式切换数组中的class
<p v-bind:class="[classA,isB?classB:""]"></p>
若
vm.isB = false
则渲染结果为
<p class="class-a"></p>
2.内联样式绑定(style属性绑定)
对象语法：直接绑定符合样式格式的对象。
<p v-bind:style="alertStyle"></p>
vm实例中包含：
data:{
alertStyle:{
color: 'red',
fontSize: '2px'
}
}<p v-bind:style="{fontSize:alertStyle.fontSize,color:'red'}"></p>数组语法：v-bind:style允许将多个样式对象绑定到同一元素上。
<p v-bind:style="[ styleObjectA,styleObjectB]" .></p>
3.自动添加前缀
在使用transform这类属性时，v-bind:style会根据需要自动添加厂商前缀。:style在运行时进行前缀探测，如果浏览器版本本省就不支持不加前缀的css属性，那就不会添加。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
Atas ialah kandungan terperinci 怎样操作vue.js数据绑定. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Mengapakah vue.js melaporkan ralat?
Apakah kegunaan slot vue.js?
Cara melompat dengan parameter dalam vue.js
Laksanakan kaedah lompat 301 melalui kod js
Cara membuat gambar ppt muncul satu persatu
Bagaimana untuk mengaktifkan perkhidmatan storan awan
Bagaimana untuk mengintegrasikan idea dengan Tomcat
Apa yang perlu dilakukan jika tiada kursor apabila mengklik pada kotak input
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
