双向绑定操作

1.v-model的基本使用

双向绑定：在view跟model之间即有通过动态绑定数据将后端传递的数据转化成所看到的页面。又有通过DOM的事件监听将页面中的改动转化成后端的数据。简单来说就是修改了一方的值另一方的值也会相应修改。
实现语法：v-model
无语法糖

<div id="app">
  <input type="text" v-model="message">
  <h2>{{message}}</h2>
</div>

<script src="..\vue.js"></script>
<script>
  const app = new Vue({
  	el: '#app',
  	data:{
  		 message: 'hailo'
  	}
  })
</script>
</body>

你在输入框输入什么，message就会变成什么
在这里插入图片描述
其实v-model的原理就是v-bind跟v-on的结合。不信你看我下面

<body>
<div id="app">
 <input type="text" :value="message" @input='inpurtext'>
  <h2>{{message}}</h2>
</div>

<script src="..\vue.js"></script>
<script>
  const app = new Vue({
  	el: '#app',
  	data:{
  		 message: 'hailo'
  	},
  	methods:{
  	  inpurtext(event){  // 还记得我吗？
  	  	//需要传一个参数但是没有传，就是默认传event事件了
  	    this.message = event.target.value;
  	  }
  	}
  })
</script>
</body>

2.v-model与radio的结合

<body>
<div id="app">
  <!--  使用了v-model绑定了同个属性，radio中可以省去取相同的name的步骤  -->
  <label for="male">
    <input type="radio" id="male" name="sex" value="男的" v-model="sex">男
  </label>
  <label for="female">
    <input type="radio" id="female" name="sex" value="女的" v-model="sex">女
  </label>
  <h2>你是{{sex}}</h2>
</div>

<script src="..\vue.js"></script>
<script>
  const app = new Vue({
  	el: '#app',
  	data:{
  		 message: 'hailo',
  		 sex:''  //如果要默认选中，可以让sex的初始值为input的value值
  	}
  })
</script>
</body>

在redio被选中之后他会把选中的value赋值给sex。

3.v-model与checkbox的结合

<body>
<div id="app">
  <label for="agree">
    <input type="checkbox" id="agree" v-model="isAgree">同意协议
  </label>
  <h4>你选择的是{{isAgree}}</h4>
  <button :disabled="!isAgree">下一步</button>
</div>

<script src="..\vue.js"></script>
<script>
  const app = new Vue({
  	el: '#app',
  	data:{
  		 isAgree: false
  	}
  })
</script>
</body>

chebox被选中后，传给model的值是true|false，并不是vaule，这里注意一下。

4.v-model与select的结合

<body>
<div id="app">
  <select v-model="names">
    <option v-for="item in name" :value="item">{{item}}</option>
  </select>
  <h1>{{names}}</h1>
</div>

<script src="..\vue.js"></script>
<script>
  const app = new Vue({
  	el: '#app',
  	data:{
  		 name: ['hanh','huang','jian'],
  		 names:[]
  	}
  })
</script>
</body>

select选中后传给model的值是被选择的option的value。需要注意的是v-model要写在select标签上，而不是option。

5.model修饰符的使用

在这里插入图片描述
直接上代码。。。。

<div id="app">
  <!--  修饰符lazy  失去焦点时才会绑定.频繁并不能说明你强，持久才能长久 -->
  <input type="text" v-model.lazy="message">
  <h2>{{message}}</h2>

  <!--  修饰符number  v-model默认返回的string，硬生生把你掰回来 -->
  <input type="number" v-model.number="age">
  <h2>{{age}}-{{typeof age}}</h2>

  <!--  修饰符trim  去掉字符串两边的空格后返回 剃掉会更好看 -->
  <input type="text" v-model.trim="message">
  <h2>{{message}}</h2>
</div>

<script src="..\vue.js"></script>
<script>
  const app = new Vue({
  	el: '#app',
  	data:{
  		 message: 'hailo',
  		 age:0
  	}
  })
</script>
</body>

同步学习代码可以在我的guthub项目中查看

来源：CSDN

作者：CodeKiang

链接：https://blog.csdn.net/weixin_43521592/article/details/104455587

标签

vue