如何理解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 相关文章推荐
获取JavaScript用户自定义类的类名称的代码
Mar 08 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
Nov 19 Javascript
javascript:json数据的页面绑定示例代码
Jan 26 Javascript
Js制作点击输入框时默认文字消失的效果
Sep 05 Javascript
jQuery异步提交表单的两种方式
Sep 13 Javascript
通过BootStrap实现轮播图的实际应用
Sep 26 Javascript
Javascript 函数的四种调用模式
Nov 05 Javascript
Vue组件选项props实例详解
Aug 18 Javascript
JS库之wow.js使用方法
Sep 14 Javascript
Vue header组件开发详解
Jan 26 Javascript
JavaScript如何获取一个元素的样式信息
Jul 29 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
Jan 07 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获取浏览器信息类和客户端地理位置的2个方法
2014/04/24 PHP
PHP数组函数array_multisort()用法实例分析
2016/04/02 PHP
PHP与Web页面的交互示例详解一
2020/08/04 PHP
Jquery Validation插件防止重复提交表单的解决方法
2010/03/05 Javascript
什么是json和jsonp,jQuery json实例详详细说明
2012/12/11 Javascript
js Array对象的扩展函数代码
2013/04/24 Javascript
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
2013/04/27 Javascript
node.js中RPC(远程过程调用)的实现原理介绍
2014/12/05 Javascript
jQuery中通过ajax的get()函数读取页面的方法
2016/02/29 Javascript
Node.js 文件夹目录结构创建实例代码
2016/07/08 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
2016/12/14 Javascript
vue.js开发环境安装教程
2017/03/17 Javascript
js 简易版滚动条实例(适用于移动端H5开发)
2017/06/26 Javascript
vue实现验证码输入框组件
2017/12/14 Javascript
Vue切换div显示隐藏,多选,单选代码解析
2020/07/14 Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
2020/09/04 Javascript
Vue实现多页签组件
2021/01/14 Vue.js
零基础写python爬虫之抓取糗事百科代码分享
2014/11/06 Python
python PyTorch参数初始化和Finetune
2018/02/11 Python
十个Python练手的实战项目,学会这些Python就基本没问题了(推荐)
2019/04/26 Python
浅析PyTorch中nn.Linear的使用
2019/08/18 Python
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
2014/09/02 HTML / CSS
html5调用app分享功能示例(WebViewJavascriptBridge)
2018/03/21 HTML / CSS
Expedia丹麦:全球领先的旅游网站
2018/03/18 全球购物
澳大利亚最大的在线美发和美容零售商之一:My Hair Care & Beauty
2019/08/24 全球购物
教师的实习自我鉴定
2013/12/17 职场文书
慰问敬老院活动总结
2014/04/26 职场文书
社会调查研究计划书
2014/05/01 职场文书
孝敬父母的演讲稿
2014/05/14 职场文书
校长竞聘演讲稿
2014/05/16 职场文书
银行青年文明号事迹材料
2014/05/31 职场文书
2014年教师节座谈会发言稿
2014/09/10 职场文书
捐款仪式主持词
2015/07/04 职场文书
2015年高三年级组工作总结
2015/07/21 职场文书
《认识钟表》教学反思
2016/02/16 职场文书
Python数据结构之队列详解
2022/03/21 Python