vue2.X v-model 指令
阿新 • • 發佈：2017-10-02
rip logs arr src light image brush -m this
1.v-model指令
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
window.onload = function(){
var vm = new Vue({
el:‘#box‘,
data:{
msg:‘Hello Vue!‘
}
});
}
</script>
</head>
<body>
<div id="box">
<input type="text" v-model="msg"/><br/>
{{msg}}
</div>
</body>
</html>
Vue控制id="box"這個DIV元素，同時在 HTML模板上使用雙花括號{{xxxx}}語法，來訪問data中定義的數據。
通過v-model 指令，我們把msg 數據綁定到了input文本框，我們修改文本框的值，發現msg 數據改變了。
2.註意：定義的數據是數組或者json
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
window.onload = function(){
var vm = new Vue({
el:‘#box‘,
data:{
msg:‘Hello Vue!‘,
arr:[‘1‘,‘2‘,‘3‘],
json:{a:‘a‘,b:‘b‘}
},
methods:{
getData(){
console.log(this.msg);
}
}
});
}
</script>
</head>
<body>
<div id="box">
<input type="text" v-model="msg" @input="getData"/><br/>
{{msg}} <br/>
{{arr}} <br/>
{{json}}
</div>
</body>
</html>
效果圖：
.
vue2.X v-model 指令