v-mode

_语义错误

已于 2022-07-15 19:40:01 修改

阅读量553

点赞数

分类专栏： VUE 文章标签： javascript vue.js 前端开发语言

于 2022-07-13 16:37:26 首次发布

本文链接：https://blog.csdn.net/m0_66451927/article/details/125760311

版权

本文详细介绍了Vue.js中的v-model指令，包括其基本使用、原理、与radio、checkbox、select的结合，以及修饰符lazy、number和trim的用法。v-model实现了表单元素和数据的双向绑定，使数据交互更便捷。

摘要由CSDN通过智能技术生成

4、v-model 和 check-box

一、 v-model

Vue中使用v-model指令来实现表单元素和数据的双向绑定。我们也可以将 v-model 用于textarea元素

双向绑定值的是绑定的双发，只要有其中一方发生改变，两者都会改变，区别一下之前的v-bind 只是单向的。

1、基本使用

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

<!-- textarea -->
<!-- <textarea name="location" id="" cols="30" rows="10"  v-model="message">
			{
  {message}}
		</textarea> -->

</div>

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

2、原理

<div id="app">
  <!--<input type="text" v-model="message">--> <!-- 第一种 用 v-model -->
  <!--<input type="text" :value="message" @input="valueChange">--><!-- 第二种 用两个函数，v-bind 和 v-on 也就是v-model 的原理，等同上面第一种-->
  <input type="text" :value="message" @input="message = $event.target.value">
  <h2>{
  {message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    methods: {
      valueChange(event) {
        this.message = event.target.value;
      }
    }
  })
</script>

3、v-model 和 radio 结合

<div id="app">
			<label for="male">
				<input type="radio" id="male" value="男" v-model="sex">男
				<!-- <input type="radio" id="male" name = "sex" value="男" v-model="sex">男 -->
				<!-- 添加name 属性使得 radio 互斥，但是当 v-model 绑定一样的时候，name 去掉也能实现互斥 -->
			</label>
			<label for="female">
				<input type="radio