如何理解Vue的v-model指令的使用方法

更新时间：2018年07月19日 10:23:36 作者：洪定伦

这篇文章主要介绍了如何理解Vue的v-model指令的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

本文主要讲解v-model指令，主要包括HTML元素的v-model和组件上的v-model两种，用四个简单的案例介绍v-model的使用。

案例一：HTML元素的v-model -输入框(text)

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>v-model指令</title>
    <script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
  </head>
  <body>
    <div id="app4">
      {{price}}<br>
      <input v-model="price"><!-- 下行注释的语法糖 -->
      <!-- <input :value="price" @input="price = $event.target.value"> -->
    </div>
    <script>
      new Vue({
        el: '#app4',
        data: {
          price: '20'
        }
      });
    </script>
  </body>
</html>

案例二：定制组件的v-model - 输入框(text)

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>v-model指令</title>
    <script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
  </head>
  <body>
    <div id="app3">
      {{price}}
      <my-input v-model="price"></my-input><!-- 下行注释的语法糖 -->
      <!-- <my-input :value="price" @input="val => {price = val}"></my-input> -->
    </div>
    <script>
      Vue.component('my-input', {
        template: '<div></span><input type="text" ref="input" :value="value" @input="doThis"/></div>',
        props: {
          value: String
        },
        methods: {
          doThis() {
            this.$emit('input', this.$refs.input.value);
          }
        }
      });
      new Vue({
        el: '#app3',
        data: {
          price: '10'
        }
      });
    </script>
  </body>
</html>

案例三：定制组件的v-model - 复选框(checkbox) - 2.2.0 新增

 <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>v-model指令</title>
      <script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
    </head>
    <body>
      <div id="app2">
        {{fruit}}<!-- 观测数据变化 -->
        <my-checkbox v-model="fruit.apple" value="apple"></my-checkbox><!-- 下行注释的语法糖 -->
        <!-- <my-checkbox :checked="fruit.apple" @change="val => {fruit.apple = val}" value="apple"></my-checkbox> -->
      
        <my-checkbox v-model="fruit.peach" value="peach"></my-checkbox><!-- 下行注释的语法糖 -->
        <!-- <my-checkbox :checked="fruit.peach" @change="val => {fruit.peach = val}" value="peach"></my-checkbox> -->
      </div>
      <script>
        Vue.component('my-checkbox', {
          template: '<div><span>{{value}}</span><input type="checkbox" :checked="checked" @change="doThis" :value="value"/></div>',
          model: {
            prop: 'checked',
            event: 'change'
          },
          props: {
            checked: Boolean,
            value: String
          },
          methods: {
            doThis() {
              this.$emit('change', !this.checked);
            }
          }
        });
        new Vue({
          el: '#app2',
          data: {
            fruit: {//数据
              apple: true,
              peach: false
            }
          }
        });
      </script>
    </body>
  </html>

案例四：定制组件的v-model - 单选按钮(radio) -2.2.0 新增

<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-model指令</title>
  <script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
</head>
<body>
  <div id="app">
    {{fruit}}<!-- 观测数据变化 -->
    <my-radio v-model="fruit" value="apple" name="myFruit"></my-radio><!-- 下行注释的语法糖 -->
    <!-- <my-radio :checked="fruit" @change="val => {fruit = val}" value="apple"></my-radio> -->
    
    <my-radio v-model="fruit" value="peach" name="myFruit"></my-radio><!-- 下行注释的语法糖 -->
    <!-- <my-radio :checked="fruit" @change="val => {fruit = val}" value="peach"></my-radio> -->
  </div>
  <script>
    Vue.component('my-radio', {
      template: '<div><span>{{value}}</span><input :name="name" type="radio" ref="radio" :checked="checked===value" @change="doThis" :value="value"/></div>',
      model: {
        prop: 'checked',
        event: 'change'
      },
      props: {
        checked: String,
        value: String,
        name: String
      },
      methods: {
        doThis() {
          this.$emit('change', this.$refs.radio.value);
        }
      }
    });
    new Vue({
      el: '#app',
      data: {
        fruit: 'peach'//数据
      }
    });
  </script>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

$解决vue vite启动项目报错ERROR: Unexpected “\x88“ in JSON 的问题$
解决vue vite启动项目报错ERROR: Unexpected “\x88“ in JSON 的问题
这篇文章主要介绍了vue vite启动项目报错ERROR: Unexpected “\x88“ in JSON 原因,本文给出出现此类问题的原因所在并给出解决方法，需要的朋友可以参考下
2022-09-09
详解Element-ui NavMenu子菜单使用递归生成时使用报错
这篇文章主要介绍了详解Element-ui NavMenu子菜单使用递归生成时使用报错，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-04-04
vuex实现简易计数器
这篇文章主要为大家详细介绍了vuex实现一个简易计数器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-10-10
Vue保持用户登录状态(各种token存储方式)
本文主要介绍了Vue保持用户登录状态(各种token存储方式)，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
webpack+vue.js快速入门教程
随着前端的快速发展，非常多的js框架被应用到项目中。Vue.js本身支持对组件的异步加载,配合Webpack的分块打包功能,可以极其轻松地实现组件的异步按需加载。这篇文章是webpack+vue.j的入门教程，有需要的可以参考借鉴。
2016-10-10
五分钟理解keep alive用法及原理
这篇文章主要为大家介绍了keep alive用法及原理示例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
Vue+ElementUI 中级联选择器Bug问题的解决
这篇文章主要介绍了Vue+ElementUI 中级联选择器Bug问题的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
Vue3子组件实现v-model用法的示例代码
在Vue 3中,实现自定义的input组件并支持v-model绑定,涉及到对modelValue这个默认prop的处理和对应的update:modelValue事件的触发,本文给大家介绍了Vue3子组件实现v-model用法的示例,需要的朋友可以参考下
2024-04-04
详解如何在vue项目中使用layui框架及采坑
这篇文章主要介绍了vue使用layui框架，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
Vue中methods的this指向问题浅析
相信我们写Vue代码时肯定都会在methods中用过this这个关键字，甚至还打印过this查看其内容。最终发现该实例对象竟然是我们的Vue实例对象
2022-10-10

如何理解Vue的v-model指令的使用方法

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具