vue框架
vue是一个 mvvm 框架
node下载vue.js命令
npm init -y
cnpm i vue -S
vue属性
v-bind: 单项绑定
v-model: 双向绑定
v-for: 循环指令
v-on:click 绑定事件
计算属性
<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: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
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); //把数组里的每一个元素变为 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>
