v-model實(shí)現(xiàn)了數(shù)據(jù)和表單標(biāo)簽的雙向綁定焕议。
示例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
<input type="text" name="" id="" v-bind:value="msg" style="width: 600px;"/>
<input type="text" name="" id="" v-model="msg" style="width: 600px;"/>
</div>
<script type="text/javascript" src="./lib/vue-2.6.10.js"></script>
<script>
var vm = new Vue({
el: '#app',
data:{
msg: '我是好學(xué)生朋鞍，愛學(xué)習(xí)中剩，愛敲代碼诫咱。么么噠'
},
methods:{
}
})
</script>
</body>
</html>
通過v-model的雙向數(shù)據(jù)實(shí)現(xiàn)簡易計(jì)算器：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<input type="text" v-model="num1"/>
<select v-model="opt">
<option value ="+">+</option>
<option value ="-">-</option>
<option value ="*">*</option>
<option value ="/">/</option>
</select>
<input type="text" v-model="num2"/>
<button type="button" @click="cal">=</button>
<input type="text" v-model="sum"/>
</div>
<script type="text/javascript" src="./lib/vue-2.6.10.js"></script>
<script>
var vm = new Vue({
el: '#app',
data:{
num1: 0,
num2: 0,
opt: '+',
sum: 0
},
methods:{
cal(){
switch(this.opt){
case '+':
this.sum = parseInt(this.num1) + parseInt(this.num2);
break;
case '-':
this.sum = parseInt(this.num1) - parseInt(this.num2);
break;
case '*':
this.sum = parseInt(this.num1) * parseInt(this.num2);
break;
case '/':
this.sum = parseInt(this.num1) / parseInt(this.num2);
break;
}
}
}
})
</script>
</body>
</html>
