如何理解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 相关文章推荐
一个JS翻页效果
Jul 23 Javascript
JavaScript 构造函数 面相对象学习必备知识
Jun 09 Javascript
基于jQuery实现在线选座之高铁版
Aug 24 Javascript
九种原生js动画效果
Nov 11 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
Jul 11 Javascript
JavaScript生成图形验证码
Aug 24 Javascript
node.js学习之断言assert的使用示例
Sep 28 Javascript
实例详解Node.js 函数
Jun 10 Javascript
vue+moment实现倒计时效果
Aug 26 Javascript
JS控制只能输入数字并且最多允许小数点两位
Nov 24 Javascript
Vue.js中Line第三方登录api的实现代码
Jun 29 Javascript
JavaScript中的执行环境和作用域链
Sep 04 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
PHP定时自动生成静态HTML的实现代码
2010/06/20 PHP
基于header的一些常用指令详解
2013/06/06 PHP
php命令行使用方法和命令行参数说明
2014/04/08 PHP
PHP_SELF,SCRIPT_NAME,REQUEST_URI区别
2014/12/24 PHP
php版微信js-sdk支付接口类用法示例
2016/10/12 PHP
浅谈php常用的7大框架的优缺点
2020/07/20 PHP
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
2010/04/14 Javascript
js获取单选框或复选框值及操作
2012/12/18 Javascript
JS中实现replaceAll的方法(实例代码)
2013/11/12 Javascript
js简单实现交换Li的值
2014/05/22 Javascript
javascript中tostring()和valueof()的用法及两者的区别
2015/11/16 Javascript
跟我学习javascript解决异步编程异常方案
2015/11/23 Javascript
JavaScript通过使用onerror设置默认图像显示代替alt
2016/03/01 Javascript
JS模仿手机端九宫格登录功能实现代码
2016/04/28 Javascript
全面解析JavaScript里的循环方法之forEach,for-in,for-of
2020/04/20 Javascript
JavaScript编程中实现对象封装特性的实例讲解
2016/06/24 Javascript
移动端js图片查看器
2016/11/17 Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
2016/12/03 Javascript
JS字符串false转boolean的方法(推荐)
2017/03/08 Javascript
利用JS实现简单的瀑布流加载图片效果
2017/04/22 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
2017/05/13 jQuery
Vue axios 中提交表单数据(含上传文件)
2017/07/06 Javascript
ui-router中使用ocLazyLoad和resolve的具体方法
2017/10/18 Javascript
微信小程序实现导航栏和内容上下联动功能代码
2020/06/29 Javascript
原生js 实现表单验证功能
2021/02/08 Javascript
几款好用的python工具库(小结)
2020/10/20 Python
公共事业管理本科生求职信
2013/10/07 职场文书
西北政法大学自主招生自荐信
2014/01/29 职场文书
人事专员的岗位职责
2014/03/01 职场文书
兴趣小组活动总结
2014/05/05 职场文书
2014年自愿离婚协议书范本
2014/09/25 职场文书
2014年计划生育工作总结
2014/11/14 职场文书
小学二年级班主任工作经验交流材料
2015/11/02 职场文书
幽默口才训练经典句子(48句)
2019/08/19 职场文书
Nginx服务器如何设置url链接
2021/03/31 Servers
MySQL优化及索引解析
2022/03/17 MySQL