一、v-model
用于实现双向数据绑定。要实现双向，首先元素要有输入和输入，即只能用在表单元素（input/select/textarea）。
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 此处为单向数据绑定，M即data中数据改变，会同步改变V中的页面显示 -->
<h4>{{msg}}</h4>
<!-- 要实现双向数据绑定，即元素要有输入和输出功能——表单元素 -->
<!-- 而v-bind也只能实现单向，从M到V -->
<input type="text" v-bind:value="msg"/>
<!-- 使用v-model指令，实现表单元素和M中数据双向绑定
绑定msg属性（msg有初始值，则input也有）；input改变也会改变msg属性 -->
<input type="text" v-model="msg"/>
</div>
<script>
/* 创建的Vue对象会绑定到window对象上 */
var vm = new Vue({
el: '#app',
data: {
msg:'到底要不要报画画培训啊。'
},
methods:{
}
})
</script>
</body>
</html>
网友评论