今天学习了v-model,v-on;
v-model
v-model是双向数据绑定，用于表单元素。
v-model 用法：v-model='数据名'。
实例
<body>
<div id=‘demo’>
<input type='text' v-model='aa'>
</div>
<script src=''../js/vue.js''></script>
<script>
new Vue({
el:'#demo',
data:{
aa:'Hellwo Vue'
}
})
</script>
</body>
v-on
v-on是绑定事件
v-on用法：v-on：click=‘函数名‘
实例
<body>
<div id="demo">
<button v-on:click='alt'>点击</button>
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el:"#demo",
data:{
msg:'123456'
},
methods:{
alt:function(){
console.log(this.msg);
}
}
})
</script>
</body>
v-on鼠标点击文字变换效果
方法一
<body>
<div id="demo">
<p>{{mag}}</p>
<button v-on:click='alt'>点击</button>
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el:'#demo',
data:{
mag:'123'
},
methods:{
alt:function(){
this.mag='456'
}
}
})
</script>
</body>
方法二
<body>
<div id="demo">
<p>{{mag}}</p>
<button v-on:click='alt'>点击</button>
</div>
<script src='../js/vue.js'></script>
<script>
new Vue({
el:'#demo',
data:{
mag:'123',
txt:'456'
},
methods:{
alt:function(){
this.mag=this.txt
}
}
})
v-on鼠标点击文字来回切换效果
<body>
<div id="demo">
<p>{{mag}}</p>
<button v-on:click='alt'>点击</button>
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el:'#demo',
data:{
mag:'123',
flag:true
},
methods:{
alt:function(){
if(this.flag){
this.mag='456',
this.flag=false
}else{
this.mag='123'
this.flag=true
}
}
}
})
</script>
</body>
组合实例
添加列表
<body>
<div id="demo">
<input type="text" v-model='txt'>
<button v-on:click='alt'>添加</button>
<ul>
<li v-for='(val,index) in arr'>{{val}}
<button v-on:click='dele(index)'>删除</button>
</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el:'#demo',
data:{
arr:['吃饭','睡觉','打游戏'],
txt:''
},
methods:{
alt:function(){
this.arr.push(this.txt),
this.txt=''
},
dele:function(ind){
this.arr.splice(ind,1)
}
}
})
</script>
