8 vue的v-model指令学习

1. v-model的简单表示

<div id="app">
　　<h1>{{ msg }}</h1>
</div>

<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
msg: '学习vue，从基础开始，so easy！'
},
methods: {
}
});
</script>

输出

2. 

绑定input的value值 ，用v-bind，

如果不用v-bing绑定，则 value=“msg” ，在input 显示的就是msg这个值本身

如果使用v-bind，则v-bind：value=“”msg” ,绑定的是data中的msg的属性值 。

 单向绑定体现

 input输入，h4的展示无变化

 控制台vm.msg打印无变化

3.v-model 双向绑定

 v-model 指令，可以实现 表单元素和 Model 中数据的双向数据绑定

注意： v-model 只能运用在 表单元素中

例如 input(radio, text, address, email....)   select    checkbox   textarea