vue框架
vue是一個(gè) mvvm 框架
node下載vue.js命令
npm init -y
cnpm i vue -S
vue屬性
v-bind: 單項(xiàng)綁定
v-model: 雙向綁定
v-for: 循環(huán)指令
v-on:click 綁定事件
計(jì)算屬性
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 計(jì)算屬性的 getter
reversedMessage: function () {
// `this` 指向 vm 實(shí)例
return this.message.split('').reverse().join('')
}
}
})
vue 表單全選幻碱，反選
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<style>
p{margin: 0;}
</style>
</head>
<body>
<div id="ipt">
<input type="checkbox" v-model="flag" @click="selAll()"/>全選
<button @click="selReverse()">反選</button>
<p v-for="(x,index) in arr" >
<input type="checkbox" :checked="x" v-on:click="sel(index)"/>
</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#ipt',
data:{
flag:false,
arr:new Array(10),
},
created(){
this.arr.fill(false);
},
methods:{
sel:function(index){
this.arr[index]=!this.arr[index];
// this.flag = !this.arr.includes(false); //es6 寫法
this.flag = this.arr.indexOf(false)==-1; //es5 寫法
console.log(this.arr[index])
},
selAll(){
this.flag = !this.flag;
this.arr.fill(this.flag); //把數(shù)組里的每一個(gè)元素變?yōu)?true
},
selReverse(){
for(var i=0;i<this.arr.length;i++){
this.arr[i]=!this.arr[i];
// Vue.set(this.arr,i,this.arr[i]); //vue
this.arr.splice(i,1,this.arr[i]); //splice
}
this.flag = this.arr.indexOf(false)==-1;
}
}
})
</script>
</body>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
