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

 

 

原文地址:https://www.cnblogs.com/maomao-Sunshine/p/11677441.html