vue常用指令:
1. v-model 一般用在表单元素 input--> text ---> v-model='msg'
2. 循环数组:
<li v-for="(value,index) in arr"> {{value}}{{index}} </li>
3.循环json:
<li v-for="(value,key) in json"> {{value}} {{key}} </li>
事件:
new Vue({
el:'.box',
data:{},
methods:{
show:function () {
alert(1);
}
}
});
<div class="box">
<input type="button" value="按钮" v-on:click="show()">
</div>
v-on:click
v-on:mouseover
v-on:mouseout
v-on:dblclick
v-on:mouseup
v-on:mousedown
<script> window.onload=function () { new Vue({ el:'.box', data:{ arr:['width','height','back','font'] }, methods:{ add:function () { this.arr.push('aaa'); } } }); }; </script> </head> <body> <div class="box"> <input type="button" value="按钮" v-on:click="add()"> <br> <ul> <li v-for="value in arr"> {{value}} </li> </ul> </div> </body> </html>
4. v-show
methods:{
changea:function () {
if(this.a==true){
this.a=false;
}else{
this.a=true;
}
}
}
<div class="box">
<input type="button" value="按钮" v-on:click="changea()" >
<div class="small-box" v-show="a">
</div>
</div>
5.事件简写 : @click
原创笔记