orderBy:傳入值必須是數(shù)組，參數(shù)為{String|Array|Function}sortKeys,即指定排序的策略。
單個(gè)鍵名：
{{ item.name}} //items數(shù)組中以鍵名name進(jìn)行降序排列
多個(gè)鍵名：
{{item.name}} //使用items里的兩個(gè)鍵名進(jìn)行排序
自定義排序函數(shù)：
{{item.name}}
methods:{
customOrder: function(a,b){
return parseFloat(a.version) > parseFloat(b.version) //對(duì)比item中version的值的大小進(jìn)行排序
}
}
5.指令
指令的值限定為綁定表達(dá)式，即當(dāng)表達(dá)式的值發(fā)生改變時(shí)，會(huì)有些特殊行為作用到綁定的DOM上。
參數(shù)：src為參數(shù)
<==>
修飾符：以半角句號(hào).開始的特殊后綴，用于表示指令應(yīng)該以特殊方式綁定。
//stop:停止冒泡。相當(dāng)于調(diào)用了e.stopPropagagation().
計(jì)算屬性
避免在模板中加入過重的業(yè)務(wù)邏輯，保證模版的結(jié)構(gòu)清晰和可維護(hù)性。
1.基礎(chǔ)例子
var vm = new Vue({
el: '#app',
data: {
firstName:'Gavin',
lastName:'CLY'
},
computed: {
fullName:function(){
//this指向vm實(shí)例
return this.firstName + ' ' + this.lastName;
}
}
}){{ firstName }}
//Gavin
{{ lastName }}
//CLY
{{ fullName }}
//Gavin CLY
注：此時(shí)對(duì)vm.firstName和vm.lastName進(jìn)行修改，始終會(huì)影響vm.fullName。
2.Setter
更新屬性時(shí)帶來便利
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：對(duì)表單元素進(jìn)行雙向數(shù)據(jù)綁定，在修改表單元素值時(shí)，實(shí)例vm中對(duì)應(yīng)的屬性值也同時(shí)更新，反之亦然。
var vm = new Vue({
el:'#app',
data: {
message: '',
gender: '',
cheched: '',
multiChecked: '',
a: 'checked',
b: 'checked'
}
})1. Text
輸入框示例，用戶輸入的內(nèi)容和vm.message直接綁定：
Your input is : {{ message }}
2. Radio
單選框示例：
3.Checkbox
單個(gè)勾選框，v-model即為布爾值，此時(shí)Input的value并不影響v-model的值。
checked: {{ checked }} //顯示的是true/false
多個(gè)勾選框，v-model使用相同的屬性名稱，且屬性為數(shù)組。
MultiChecked:{{ multiChecked.join{'|'} }}
//multiChecked:1|2
4.Select
單選
A
Selected: {{ selected }}
多選
A
MultiSelected: {{ multiSelected.join('|') }}
5.綁定value
通過v-bind實(shí)現(xiàn)，表單控件的值綁定到Vue市里的動(dòng)態(tài)屬性上。
Checkbox
選中：
vm.checked == vm.a //=> true
未選中：
vm.checked == vm.b //=>true
Radio
選中：
vm.checked == vm.a //=> true
3.Select Options
123
選中：
typeof vm.selected //=> object
vm.selected.number //=> 123
6.參數(shù)特性
.lazy:默認(rèn)情況下，v-model在input事件中同步輸入框與數(shù)據(jù)，加lazy屬性后會(huì)在change事件中同步。
.number:自動(dòng)將用戶輸入轉(zhuǎn)為Number類型，如果原值轉(zhuǎn)換結(jié)果為NaN，則返回原值。
.trim:如果要自動(dòng)過濾用戶輸入的首尾空格，可以添加 trim 修飾符到 v-model 上過濾輸入
Class與Style綁定
1.Class綁定
對(duì)象語法：v-bind:class接受參數(shù)是一個(gè)對(duì)象，而且可以與普通的class屬性共存。
vm實(shí)例中需要包含：
data：{
active:true
}渲染結(jié)果為：
數(shù)組語法：v-bind:class也接受數(shù)組作為參數(shù)。
vm實(shí)例中需要包括：
data:{
classA:"class-a",
classB:"class-b"
}渲染結(jié)果為：
使用三元表達(dá)式切換數(shù)組中的class
若
vm.isB = false
則渲染結(jié)果為
2.內(nèi)聯(lián)樣式綁定(style屬性綁定)
對(duì)象語法：直接綁定符合樣式格式的對(duì)象。
vm實(shí)例中包含：
data:{
alertStyle:{
color: 'red',
fontSize: '2px'
}
}
數(shù)組語法：v-bind:style允許將多個(gè)樣式對(duì)象綁定到同一元素上。
3.自動(dòng)添加前綴
在使用transform這類屬性時(shí)，v-bind:style會(huì)根據(jù)需要自動(dòng)添加廠商前綴。:style在運(yùn)行時(shí)進(jìn)行前綴探測(cè)，如果瀏覽器版本本省就不支持不加前綴的css屬性，那就不會(huì)添加。
關(guān)于vue.js中怎么實(shí)現(xiàn)數(shù)據(jù)綁定操作就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
分享名稱：vue.js中怎么實(shí)現(xiàn)數(shù)據(jù)綁定操作-創(chuàng)新互聯(lián)
網(wǎng)頁鏈接：http://weahome.cn/article/depsid.html
-
在線咨詢
微信咨詢
電話咨詢
-
028-86922220（工作日）
18980820575（7×24）
-
提交需求
-
返回頂部
重慶分公司
重慶分公司
