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


Posted in Javascript onJuly 19, 2018

本文主要讲解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>

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

案例二: 定制组件的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>

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

案例三: 定制组件的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>

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

案例四: 定制组件的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的v-model指令的使用方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery颜色选择器ColorPicker实现代码
Nov 14 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
Sep 15 Javascript
window.location不跳转的问题解决方法
Apr 17 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
Jun 15 Javascript
js调试系列 源码定位与调试[基础篇]
Jun 18 Javascript
Node.js 制作实时多人游戏框架
Jan 08 Javascript
ajax如何实现页面局部跳转与结果返回
Aug 24 Javascript
Node.js Streams文件读写操作详解
Jul 04 Javascript
angularjs 中$apply,$digest,$watch详解
Oct 13 Javascript
Vue2.0 v-for filter列表过滤功能的实现
Sep 07 Javascript
React和Vue中监听变量变化的方法
Nov 14 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
May 27 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
Jul 19 #Javascript
微信小程序自定义对话框弹出和隐藏动画
Jul 19 #Javascript
浅谈Vue初学之props的驼峰命名
Jul 19 #Javascript
解决vue-cli3 使用子目录部署问题
Jul 19 #Javascript
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
Jul 19 #Javascript
微信小程序实现分享到朋友圈功能
Jul 19 #Javascript
微信小程序实现自定义加载图标功能
Jul 19 #Javascript
You might like
一个可查询所有表的“通用”查询分页类
2006/10/09 PHP
PHP实现提取一个图像文件并在浏览器上显示的代码
2012/10/06 PHP
php模拟登陆的实现方法分析
2015/01/09 PHP
php中mysql操作buffer用法详解
2015/03/19 PHP
PHP Web木马扫描器代码分享
2015/09/06 PHP
php依赖注入知识点详解
2019/09/23 PHP
TNC vs IO BO3 第一场2.13
2021/03/10 DOTA
JavaScript 应用类库代码
2008/06/02 Javascript
javascript 带有滚动条的表格,标题固定,带排序功能.
2009/11/13 Javascript
jQuery UI AutoComplete 自动完成使用小记
2010/08/21 Javascript
javascript hashtable 修正版 下载
2010/12/30 Javascript
javascript判断用户浏览器插件安装情况的代码
2011/01/01 Javascript
jQuery中prependTo()方法用法实例
2015/01/08 Javascript
jQuery+ajax实现无刷新级联菜单示例
2015/05/21 Javascript
简单三步实现报表页面集成天气
2016/12/15 Javascript
js实现手机拍照上传功能
2017/01/17 Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
2017/01/25 Javascript
JS使用new操作符创建对象的方法分析
2019/05/30 Javascript
vue+element实现动态加载表单
2020/12/13 Vue.js
使用Python编写简单网络爬虫抓取视频下载资源
2014/11/04 Python
Python的Flask框架中实现分页功能的教程
2015/04/20 Python
十个Python程序员易犯的错误
2015/12/15 Python
Python使用修饰器执行函数的参数检查功能示例
2017/09/26 Python
python+pyqt实现12306图片验证效果
2017/10/25 Python
使用python爬虫获取黄金价格的核心代码
2018/06/13 Python
pygame实现俄罗斯方块游戏
2018/06/26 Python
tensorflow如何批量读取图片
2019/08/29 Python
Python编写打字训练小程序
2019/09/26 Python
pytorch 指定gpu训练与多gpu并行训练示例
2019/12/31 Python
锐步英国官网:Reebok英国
2019/11/29 全球购物
sealed修饰符是干什么的
2012/10/23 面试题
党支部工作总结2015
2015/04/01 职场文书
当幸福来敲门英文观后感
2015/06/01 职场文书
游戏开发中如何使用CocosCreator进行音效处理
2021/04/14 Javascript
用golang如何替换某个文件中的字符串
2021/04/25 Golang
教你使用一行Python代码玩遍童年的小游戏
2021/08/23 Python