v-mode

最新推荐文章于 2024-04-09 14:48:57 发布

Doe

最新推荐文章于 2024-04-09 14:48:57 发布

阅读量1.9k

点赞数 2

分类专栏： # Vue 文章标签： v-model radio checkbox select 修饰符

本文链接：https://blog.csdn.net/weixin_43613849/article/details/117480990

版权

Vue 专栏收录该内容

48 篇文章 3 订阅

订阅专栏

1、v-model的基本使用

nVue中使用v-model指令来实现表单元素和数据的双向绑定。

当我们在输入框输入内容时
因为input中的v-model绑定了message，所以会实时将输入的内容传递给message，message发生改变。
当message发生改变时，因为上面我们使用Mustache语法，将message的值插入到DOM中，所以DOM会发生响应的改变。
所以，通过v-model实现了双向的绑定。

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

  <script src="../js/vue.js"></script>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'hello'
      }
    })
  </script>

2、v-model的原理

v-model其实是一个语法糖，它的背后本质上是包含两个操作：

1.v-bind绑定一个value属性

2.v-on指令给当前元素绑定input事

也就是说下面的代码：等同于下面的代码：

  <div id="app">
    <input type="text" v-model="message">
    <input type="text" :value="message" @input="valueChange">
    <input type="text" :value="message" @input="message=$event.target.value">
    {{message}}
  </div>

  <script src="../js/vue.js"></script>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'hello'
      },
      methods: {
        valueChange(event) {
          this.message = event.target.value;
        }
      }
    })
  </script>

3、v-model结合radio类型

当v-model单选绑定了同一个sex的时候，不需要相同的name他们其实也已经互斥了

<div id="app">
  <label for="male">
    <input type="radio" name="sex" id="male" value="男" v-model="sex">男
  </label>

  <label for="female">
    <input type="radio" name="sex" id="female" value="女" v-model="sex">女
  </label>

  <h2>选择的性别是：{{sex}}</h2>
</div>

<script src="../js/vue.js"></script>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'hello',
      sex: "女"
    }
  })
</script>

4、v-model结合checkbox

复选框分为两种情况：单个勾选框和多个勾选框

单个勾选框：

v-model即为布尔值。

此时input的value并不影响v-model的值。

多个复选框：

当是多个复选框时，因为可以选中多个，所以对应的data中属性是一个数组。

当选中某一个时，就会将input的value添加到数组中。

<div id="app">
    <!--
      1、checkbox单选框
    -->
    <label for="agree">
      <input type="checkbox" name="" id="agree" v-model="isAgree">同意协议
    </label>
    <h2>您选择的是：{{isAgree}}</h2>
    <button :disabled="!isAgree">Next</button>



    <!--
      2、checkbox多选框
    -->
    <label for="">
      <input type="checkbox" value="篮球" v-model="hobbites">篮球
      <input type="checkbox" value="足球" v-model="hobbites">足球
      <input type="checkbox" value="乒乓球" v-model="hobbites">乒乓球
      <input type="checkbox" value="排球" v-model="hobbites">排球
    </label>
    <h2>您爱好的是：{{hobbites}}</h2>
  </div>

  <script src="../js/vue.js"></script>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'hello',
        isAgree: false,
        hobbites: []
      }
    })
  </script>

5、v-model结合select类型

和checkbox一样，select也分单选和多选两种情况。

单选：只能选中一个值。

v-model绑定的是一个值。

当我们选中option中的一个时，会将它对应的value赋值到mySelect中

多选：可以选中多个值。

v-model绑定的是一个数组。

当选中多个值时，就会将选中的option对应的value添加到数组mySelects中

<div id="app">

    <!--
      1、选择一个
    -->
    <select name="abc" id="" v-model="fruit">
      <option value="苹果">苹果</option>
      <option value="香蕉">香蕉</option>
      <option value="葡萄">葡萄</option>
      <option value="梨子">梨子</option>
    </select>
    <h2>选择的水果是：{{fruit}}</h2>




    <!--
      1、选择多个
    -->
    <select name="abc" v-model="fruits" multiple>
      <option value="苹果">苹果</option>
      <option value="香蕉">香蕉</option>
      <option value="葡萄">葡萄</option>
      <option value="梨子">梨子</option>
    </select>
    <h2>选择的水果是：{{fruits}}</h2>


  </div>

  <script src="../js/vue.js"></script>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'hello',
        fruit: '香蕉',
        fruits: []
      }
    })
  </script>

6、v-model修饰符的使用

1、修饰符lazy

默认情况下，v-model默认是在input事件中同步输入框的数据的。

也就是说，一旦有数据发生改变对应的data中的数据就会自动发生改变。

lazy修饰符可以让数据在失去焦点或者回车时才会更新：

    <div id="app">

    <!--
      1、修饰符lazy: lazy修饰符可以让数据在失去焦点或者回车时才会更新
    -->
    <input type="text" v-model.lazy="message">
    <h2>{{message}}</h2>


  </div>

  <script src="../js/vue.js"></script>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'hello'
      }
    })
  </script>

2、修饰符number

number修饰符：

默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当做字符串类型进行处理。

但是如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理。

number修饰符可以让在输入框中输入的内容自动转成数字类型：

<div id="app">

    <!--
      2、修饰符number: number修饰符可以让在输入框中输入的内容自动转成数字类型
    -->
    <input type="text" v-model.number="age">
    <h2>{{age}}--{{typeof(age)}}</h2>


  </div>

  <script src="../js/vue.js"></script>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        age: '10'
      }
    })
  </script>

3、修饰符trim

trim修饰符：

如果输入的内容首尾有很多空格，通常我们希望将其去除

trim修饰符可以过滤内容左右两边的空格

  <div id="app">

    <!--
      3、修饰符trim: trim修饰符可以过滤内容左右两边的空格
    -->
    <input type="text" v-model.trim="name">
    <h2>您输入的名字：{{name}}</h2>

  </div>

  <script src="../js/vue.js"></script>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        name: '   1111'
      }
    })
  </script>

完整代码如下：

 <div id="app">

    <!--
      1、修饰符lazy: lazy修饰符可以让数据在失去焦点或者回车时才会更新
    -->
    <input type="text" v-model.lazy="message">
    <h2>{{message}}</h2>


    <!--
      2、修饰符number: number修饰符可以让在输入框中输入的内容自动转成数字类型
    -->
    <input type="text" v-model.number="age">
    <h2>{{age}}--{{typeof(age)}}</h2>


    <!--
      3、修饰符trim: trim修饰符可以过滤内容左右两边的空格
    -->
    <input type="text" v-model.trim="name">
    <h2>您输入的名字：{{name}}</h2>

  </div>

  <script src="../js/vue.js"></script>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'hello',
        age: '10',
        name: '   1111'
      }
    })
  </script>

参考链接：

https://blog.csdn.net/jingjing217/article/details/108274434

Doe

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
v-mode

目录1、v-model的基本使用2、v-model的原理3、v-model结合radio类型4、v-model结合checkbox5、v-model结合select类型6、v-model修饰符的使用1、修饰符lazy2、修饰符number3、修饰符trim1、v-model的基本使用nVue中使用v-model指令来实现表单元素和数据的双向绑定。当我们在输入框输入内容时因为input中的v-model绑定了message，所以会实时将输入的内容传递给me
复制链接

扫一扫