vue.js v-model v-on:
1. v-model='' 双向数据绑定
在给 <input /> 元素添加 v-model 属性时，默认会把 value 作为元素的属性，然后把 'input' 事件作为实时传递 value 的触发事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../diyitain/js/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Runoob!'
}
})
</script>
</body>
</html>
1. v-on:click='' 事件处理器
事件监听可以使用 v-on 指令。可以接收一个定义的方法来调用。按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../diyitain/js/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反转字符串</button>
</div>
<script>
new Vue({
el: '#app'
, data: {
message: 'Runoob!'
}
, methods: {
reverseMessage: function () {
this.message = 'boonuR!'
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../diyitain/js/vue.js"></script>
</head>
<body>
<div class="box">
<p>{{mas}}</p>
<button v-on:click='but'>啊啊啊</button>
</div>
<script>
new Vue({
el:'.box',
data:{
mas:'你好世界',
flag: true
},
methods:{
but:function(){
if(this.flag){
this.mas='你好凯琳',
this.flag= false
}else{
this.mas='你好世界'
this.flag= true
}
}
}
})
</script>
</body>
</html>
-------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../diyitain/js/vue.js"></script>
</head>
<body>
<div class="box">
{{mas}}
<button v-on:click='alt'>啊啊</button>
</div>
<script>
new Vue({
el:'.box',
data:{
mas:'琳世界',
age:'凯世界'
},
methods:{
alt:function(){
this.mas=this.age
}
}
})
</script>
</body>
</html>
==================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加删除</title>
<script src="../js/vue.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 500px;
margin: 100px auto 0;
}
form{
margin: 20px 0px;
}
input{
width: 400px;
}
button{
width: 90px;
}
tbody{
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<form action="#">
<input type="text" v-model='text4'>
</form>
<form action="#">
<input type="text" v-model='text1'>
</form>
<form action="#">
<input type="text" v-model='text2'>
<button v-on:click='add'>添加</button>
</form>
<table border="1" cellspacing="0" width="500" >
<tr>
<th>编号</th>
<th>价格</th>
<th>商品</th>
<th>删除</th>
</tr>
<tr v-show='arr.length ==0'>
<td colspan="4"></td>
</tr>
<tr v-for='vuler in arr'>
<td>{{vuler.num}}</td>
<td>{{vuler.price}}</td>
<td>{{vuler.soping}}</td>
<td><a href="javascript:void(0)" v-on:click='daa(vuler.ind)'>删除</a></td>
</tr>
</table>
</div>
<script>
new Vue({
el:'.box',
data:{
arr:[
{num:1,price:2,soping:'苹果'}
],
text4:'',
text1:'',
text2:''
},
methods:{
add:function(){
var p = {num:this.text4,price:this.text1,soping:this.text2};
this.arr.push(p);
this.text4='',
this.text1='',
this.text2=''
},
daa:function(ind){
this.arr.splice(ind,1)
}
}
})
</script>
</body>
</html>
