vue.js v-model v-on:
1. v-model='' 雙向數(shù)據(jù)綁定
在給 <input /> 元素添加 v-model 屬性時(shí)，默認(rèn)會把 value 作為元素的屬性疆柔，然后把 'input' 事件作為實(shí)時(shí)傳遞 value 的觸發(fā)事件
<!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='' 事件處理器
事件監(jiān)聽可以使用 v-on 指令二汛。可以接收一個(gè)定義的方法來調(diào)用俭嘁。按鈕的事件我們可以使用 v-on 監(jiān)聽事件躺枕，并對用戶的輸入進(jìn)行響應(yīng)。
<!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">反轉(zhuǎn)字符串</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>價(jià)格</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>
