精华内容
下载资源
问答
  • 用法:npm i babel-plugin-jsx-v-model -D然后在插件示例.babelrc下将jsx-v-model添加到您的.babelrc文件:{“ presets”:[“ es2015”],“ plugins”:[“ jsx-v-model“,” transform-vue-jsx“]}代码:Vue....
  • 主要介绍了vue指令之表单控件绑定v-model v-modelv-bind结合使用,需要的朋友可以参考下
  • 主要介绍了vue中的v-model原理,与组件自定义v-model详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了vue中input的v-model清空操作,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • Vue.js中提供了v-model可以双向绑定表单元素,这个方法可以非常方便的获得输入的值,但是有时候表单元素需要循环生成,在循环中要怎样获得指定输入框的值呢 这里介绍两种: 一种是v-for中循环生成的输入框, 一种是在...
  • 2.如果v-model绑定的是常量,那生成的多组单选,一组变化,其他组会联动一起变化。 3.v-model无法绑定迭代变量,如上图那么写就会报错: ‘v-model’ directives cannot update the iteration variable ‘i’ itself...
  • 主要介绍了vue3实现v-model原理详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 本篇文章给大家分享了vue v-model动态生成的相关知识点以及实例代码,有兴趣的朋友参考学习下。
  • v-model介绍 熟悉Vue的小伙伴们都知道 v-model 是Vue的一个很大的特色,可以实现双向数据绑定。但本质上呢,它不过是语法糖,它负责监听用户的输入事件以更新数据。 以下摘取自Vue官方文档 v-model 在内部使用不同...
  • 主要介绍了浅谈vue中关于checkbox数据绑定v-model指令的个人理解,v-model用于表单的数据绑定很常见,下面就来详细的介绍一下
  • v-model用于表单数据的双向绑定,其实它就是一个语法糖。这篇文章主要介绍了vue中v-model的应用,需要的朋友可以参考下
  • 主要介绍了vue.js 解决v-model让select默认选中不生效的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • V-model开发流程简介

    2018-08-14 10:11:54
    简单的介绍了V-model用于软件,硬件和其他的数字化开发的过程。
  • 1.v-model可以看成是value+input方法的语法糖。 2.组件的v-model就是value+input方法的语法糖。 3.可以绑定v-model的有:input,checkbox,select,textarea,radio 二、源码 1.组件的 v-model源码 组件的 v-...

    一、概念

    1.v-model可以看成是value+input方法的语法糖。

    2.组件的v-model就是value+input方法的语法糖。

    3.可以绑定v-model的有:input,checkbox,select,textarea,radio 

    二、源码

    1.组件的 v-model源码

    组件的 v-model 是默认转化成value+input

    总结:

          在组件初始化的时候,回去判断当前数据中有没有model属性,如果有就会使用transformModel方法进行model的转换,transformModel会对数据的model属性进行判断,如果没有prop属性默认就是value,如果没有event属性就是input,然后将值赋给value,给on绑定input的事件,对于的就是callback。

           自定义model时,只需要在组件中传入model的prop和event属性。

    const VueTemplateCompiler = require('vue-template-compiler');
    const ele = VueTemplateCompiler.compile('<el-checkbox v-model="check"></elcheckbox>');
    // 解析后
    with(this) {
        return _c('el-checkbox', {
            model: { // v-model解析后
                value: (check), 
                callback: function ($$v) {
                    check = $$v
                }, 
                expression: "check"
            }
        })
    }

     (1)组件初始化时,会判断是否有model属性。(src/core/vdom/create-component.js)

               在createComponent方法中

    // 如果当前数据有model属性,就会使用transformModel转换model
    if (isDef(data.model)) {
       transformModel(Ctor.options, data)
    }

    (2)transformModel 方法用来转换model(src/core/vdom/create-component.js)

    function transformModel (options, data: any) {
      // 如果没有prop属性默认就是value
      const prop = (options.model && options.model.prop) || 'value'
      // 如果没有event属性,默认就是input
      const event = (options.model && options.model.event) || 'input'
      ;(data.attrs || (data.attrs = {}))[prop] = data.model.value// data.attrs.value="xxx"
      const on = data.on || (data.on = {})
      const existing = on[event] // 给on绑定input的事件,对应的函数就是callback
      const callback = data.model.callback
      if (isDef(existing)) {
        if (
          Array.isArray(existing)
            ? existing.indexOf(callback) === -1
            : existing !== callback
        ) {
          on[event] = [callback].concat(existing)
        }
      } else {
        on[event] = callback // 
      }
    }

    (3)自定义v-model

    Vue.component('el-checkbox', {
        template:`<input type="checkbox" :checked="check" @change="$emit('change',$event.target.checked)">`, 
        model:{
            prop:'check', // 更改默认的value的名字
            event:'change' // 更改默认的方法名
        },
        props: {
            check: Boolean
        }
    })
     

    2.原生的 v-model

    原生的 v-model ,会根据标签的不同生成不同的事件和属性

    总结:

           如果是普通标签,它一看是input就会直接绑成domProps,值是value,把on绑定input,在除了valueinput外还会加上一个指令directives,如果input上面写上type是checkbox时,这时候domProps就会变成checked,on的事件就会变成change,它在编译的时候会根据type生成不同的事件和属性。

          在编译的时候,如果有v-model,就会执行这个指令,找对指令下对应的model,就会对他进行判断,根据不同的类型生成不同的内容:

        组件---------->genComponentModel方法

        select-------->genSelect方法------------------>添加value属性,change事件

        checkbox--->genCheckboxModel方法----->添加checked属性,change事件

        radio--------->genRadioModel方法----------->添加checked属性,change事件

        textarea ---->genDefaultModel方法--------->添加value属性,input事件

        input--------->genDefaultModel方法--------->添加value属性,input或change事件,如果lazy是ture就是change

         在编译后多出一个directives指令是,是在运行时,在inserted方法中会对元素处理一些关于输入法的问题,对它增加了compositionstart,compositionend,change三个事件

    compositionstart:当用户使用拼音输入法开始输入汉字时,这个事件就会被触发。

    compositionend:将被触发 (具有特殊字符的触发, 需要一系列键和其他输入, 如语音识别或移动中的字词建议)。

    <input v-model="sth" />
    //  等同于
    <input :value="sth" @input="sth = $event.target.value" />
    const VueTemplateCompiler = require('vue-template-compiler');
    const ele = VueTemplateCompiler.compile('<input v-model="value"/>');
    
    with(this) {
        return _c('input', {
            directives: [{
                name: "model",
                rawName: "v-model",
                value: (value),
                expression: "value"
            }],
            domProps: {
                "value": (value)
            },
            on: {
                "input": function ($event) {
                    if ($event.target.composing) return;
                    value = $event.target.value
                }
            }
        })
    }
    
    // 将input添加上type,值是ckeckbox
    const ele = VueTemplateCompiler.compile('<input type="checkbox" v-model="value"/>'); 
     // 编译完后domProps的属性就是checked,on绑定的就是change事件

    (1)编译时:不同的标签解析出的内容不一样 (src/platforms/web/compiler/directives/model.js)

    if (el.component) {
        genComponentModel(el, value, modifiers)
        // component v-model doesn't need extra runtime
        return false
      } else if (tag === 'select') {
        genSelect(el, value, modifiers)
      } else if (tag === 'input' && type === 'checkbox') {
        genCheckboxModel(el, value, modifiers)
      } else if (tag === 'input' && type === 'radio') {
        genRadioModel(el, value, modifiers)
      } else if (tag === 'input' || tag === 'textarea') {
        genDefaultModel(el, value, modifiers)
      } else if (!config.isReservedTag(tag)) {
        genComponentModel(el, value, modifiers)
        // component v-model doesn't need extra runtime
        return false
      } else if (process.env.NODE_ENV !== 'production') {
        warn(
          `<${el.tag} v-model="${value}">: ` +
          `v-model is not supported on this element type. ` +
          'If you are working with contenteditable, it\'s recommended to ' +
          'wrap a library dedicated for that purpose inside a custom component.',
          el.rawAttrsMap['v-model']
        )
      }

    (2)运行时:会对元素处理一些关于输入法的问题 (src/platforms/web/runtime/directives/model.js)

    inserted (el, binding, vnode, oldVnode) {
        if (vnode.tag === 'select') {
          // #6903
          if (oldVnode.elm && !oldVnode.elm._vOptions) {
            mergeVNodeHook(vnode, 'postpatch', () => {
              directive.componentUpdated(el, binding, vnode)
            })
          } else {
            setSelected(el, binding, vnode.context)
          }
          el._vOptions = [].map.call(el.options, getValue)
        } else if (vnode.tag === 'textarea' || isTextInputType(el.type)) {
          el._vModifiers = binding.modifiers
          if (!binding.modifiers.lazy) {
           // 对输入法做了一些校验,然后绑定自己的事件
            el.addEventListener('compositionstart', onCompositionStart) 
            el.addEventListener('compositionend', onCompositionEnd)
            // Safari < 10.2 & UIWebView doesn't fire compositionend when
            // switching focus before confirming composition choice
            // this also fixes the issue where some browsers e.g. iOS Chrome
            // fires "change" instead of "input" on autocomplete.
            el.addEventListener('change', onCompositionEnd)
            /* istanbul ignore if */
            if (isIE9) {
              el.vmodel = true
            }
          }
        }
      }

     

    展开全文
  • 一、Vue中v-modelv-bind:value的区别 1. v-model //html <div> <input type="text" v-model="message" /> <div>{{message}}</div> </div> //js export default { data(){ ...

    以下都以input为例:

    一、Vue中v-model和v-bind:value的区别

    1. v-model

    //html
    <div>
       <input type="text" v-model="message" />
       <div>{{message}}</div>
    </div>
    
    //js
    export default {
      data(){
          return{
           message:'123'
          }
      }, 
    }
    

    当修改输入框中的数据时,data中的message也会跟着变化,所以上下都是显示的"123456" 

    2. v-bind:value

    //html
    <div>
       <input type="text" v-bind:value="message" />
       <div>{{message}}</div>
    </div>
    
    //js
    export default {
      data(){
          return{
           message:'123'
          }
      }, 
    }

     

    可以看到当修改输入框中的值时,data中的message并没有跟着改变,所以{{message}} 中仍然显示的是初始时候的“123”

    小结:

    (1)v-model实现了视图和data中数据的双向绑定,二者有一个改变,另一个也会随之改变。

    (2)v-bind:value 只是在初始化的时候把data中的数据绑定到input上,修改input的值不会改变data中的数据。

     

    二、手动实现v-model  (v-bind:value+事件)

    注意:input的change和input事件都可以实现,区别是input是实时触发而change是失去焦点或者按回车时才会触发。

    (实际上,在默认情况下,v-model 在 input 事件中同步输入框的值与数据,但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步)

    因为我们想要实时改变的效果,所以这里我们选择监听input事件

    //html
    <div>
         <input type="text" @input="handleInput" :value="message" />
         <div>{{message}}</div>
         
    </div>
    
    //js
    export default {
      data(){
          return{
           message:'123'
          }
      }, 
      methods:{
        handleInput(e){
          this.message = e.target.value;
        }
      }
    }
    

    或者直接简写:

    <input type="text" @input="message=$event.target.value" :value="message" />

    v-model原理:

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

    • v-bind绑定一个value属性
    • v-on指令给当前元素绑定input事件

     

     

    展开全文
  • Vue 指令v-for和v-model

    千次阅读 2018-12-02 17:48:26
    Vue的指令(带有v-前缀) (1)v-if &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;div id=&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;app&amp;amp;amp;amp;amp;amp;amp;amp;...

    Vue 指令v-for和v-model

    上一篇文章中总结了v-bind和v-on指令的用法。这篇文章总结一下v-for和v-model指令的用法。

    (1)v-for

    v-for指令可以对数组或者对象或者整数进行循环。需要使用 item in items(或者item of items) 的特殊语法,items是定义的原数组或者原对象,item是数组元素或者对象属性的别名。

    1.对整数进行循环:
    <div>
      <span v-for="n in 10">{{ n }} </span>
    </div>
    
    2.v-for对数组进行循环:
    <div id="app">
       <ul>
           <li v-for="item in lists">
               {{item}}
           </li>
       </ul>
    </div>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
              lists:[
                  "苹果",
                  "香蕉",
                  "橘子"
              ]
            }
        })
    </script>
    

    渲染结果为:

    <div id="app">
       <ul>
           <li>苹果</li>
           <li>香蕉</li>
           <li>橘子</li>
       </ul>
    </div>
    
    v-for支持一个可选的第二个参数作为当前项的索引:
    <div id="app">
        <ul>
            <li v-for="(item,index) in lists">
                {{index}}--{{item}}
            </li>
        </ul>
    </div>
    

    渲染的结果为:

    <div id="app">
       <ul>
           <li>0--苹果</li>
           <li>1--香蕉</li>
           <li>2--橘子</li>
       </ul>
    </div>
    
    3.v-for对对象进行循环

    在遍历对象时,是按照Object.keys()的结果遍历的,在不同javascript的引擎下不能保证结果相同。

    <div id="app">
        <ul>
            <li v-for="value in object">
                {{value}}
            </li>
        </ul>
    </div>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                object:{
                    "11":"q",
                    "22":"w",
                    "33":"e"
                }
            }
        })
    </script>
    

    渲染的结果为:

    <div id="app">
       <ul>
           <li>q</li>
           <li>w</li>
           <li>e</li>
       </ul>
    </div>
    

    可以提供第二个参数作为键名,第三个参数作为索引

    <div id="app">
        <ul>
            <li v-for="(value,key,index) in object">
               {{index}}--{{key}}:{{value}}
            </li>
        </ul>
    </div>
    

    渲染的结果为:

    <div id="app">
       <ul>
           <li>0--11:q</li>
           <li>1--22:w</li>
           <li>2--33:e</li>
       </ul>
    </div>
    
    4.v-for与方法和计算属性的联合使用:

    有时,我们想要显示一个数组的过滤或排序副本,而不实际改变或重置原始数据。在这种情况下,可以创建返回过滤或排序数组的计算属性或者方法:

    <div id="app">
        <ul>
            <li v-for="n in evenNumbers">{{ n }}</li>
        </ul>
    </div>
    <script>
        var app=new Vue({
            el:"#app",
            data: {
                numbers: [ 1, 2, 3, 4, 5 ]
            },
            computed: {
                evenNumbers: function () {
                    return this.numbers.filter(function (number) {
                        return number % 2 === 0
                    })
                }
            }
        })
    </script>
    
    <div id="app">
        <ul>
            <li v-for="n in even(numbers)">{{ n }}</li>
        </ul>
    </div>
    <script>
        var app=new Vue({
            el:"#app",
            data: {
                numbers: [ 1, 2, 3, 4, 5 ]
            },
            methods: {
                even: function (numbers) {
                    return numbers.filter(function (number) {
                        return number % 2 === 0
                    })
                }
            }
        })
    </script>
    

    渲染结果均为:

    <div id="app">
       <ul>
           <li>2</li>
           <li>4</li>
       </ul>
    </div>
    
    5.v-for用在内置标签<template>上,渲染多个元素
    <div id="app">
        <ul>
            <template v-for="item in lists">
                <li>name:{{item.name}}</li>
                <li>number:{{item.number}}</li>
            </template>
        </ul>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                lists: [
                    {
                        name: "苹果",
                        number: 1
                    },
                    {
                        name: "香蕉",
                        number: 2
                    },
                    {
                        name: "橘子",
                        number: 3
                    }
                ]
            }
        })
    </script>
    

    渲染结果为:

        <ul>
            <li>name:苹果</li>
            <li>number:1</li>
            <li>name:香蕉</li>
            <li>number:2</li>
            <li>name:橘子</li>
            <li>number:2</li>
        </ul>
    
    6.v-for与v-if

    当它们处于同一节点,v-for 的优先级比 v-if 更高,这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你想为仅有的一些项渲染节点时,这种优先级的机制会十分有用,如下:

    <li v-for="todo in todos" v-if="!todo.isComplete">
      {{ todo }}
    </li>
    

    上面的代码只传递了未完成的 todos。
    而如果你的目的是有条件地跳过循环的执行,那么可以将 v-if 置于外层元素 (或 <template>)上。如:

    <ul v-if="todos.length">
      <li v-for="todo in todos">
        {{ todo }}
      </li>
    </ul>
    <p v-else>No todos left!</p>
    

    (2)v-model:

    v-model可以实现表单类元素上的双向绑定数据。它会根据控件类型自动选取正确的方法来更新元素。

    1.文本
    <div id="app">
        <p>{{message}}</p>
        <input v-model="message">
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "hhhhh"
            },
        })
    </script>
    

    在改变input的内容的同时,<p>中的内容也会实时更新。

    使用v-model时,用中文输入法输入中文时,一般在拼音阶段,Vue不会更新数据,当确定汉字时才会更新,如果希望总是实时更新,可以用v-on:input来代替v-model。
    实际上v-model是一个特殊的语法糖,它会在不同的表单元素上智能处理。

    <div id="app">
        <p>{{message}}</p>
        <input @input="handle">
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: ""
            },
            methods:{
                handle:function(e){
                    this.message=e.target.value;
                }
            }
        })
    </script>
    

    上面代码中,e.target是引发input事件的DOM元素,e.target.value获得该输入框的值。

    2.复选框
    <div id="app">
        <!--复选框单独使用-->
        <input type="checkbox" id="checkbox" v-model="check">
        <label for="checkbox">{{check}}</label>
        <br/>
        <br/>
        <!--复选框组合使用-->
        <input type="checkbox" id="jack" value="Jack" v-model="name">
        <label for="jack">Jack</label>
        <input type="checkbox" id="john" value="John" v-model="name">
        <label for="john">John</label>
        <input type="checkbox" id="mike" value="Mike" v-model="name">
        <label for="mike">Mike</label>
        <br>
        <span>Checked names: {{ name }}</span>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                check: true,
                name: []
            },
        })
    </script>
    

    在复选框单独使用时,用v-model绑定一个布尔值,label中渲染的内容也会相应更新。
    在复选框组合使用时,v-model与value配合使用,多个勾选框的value值绑定到同一个数组,如果value的值在数组当中,就会选中这一项。这个过程也是双向的,在勾选时,value的值也会自动push到这个数组中。

    3.单选按钮

    v-model配合value一起使用可以实现互斥选择的效果:

    <div id="app">
        <input type="radio" id="one" value="One" v-model="picked">
        <label for="one">One</label>
        <br>
        <input type="radio" id="two" value="Two" v-model="picked">
        <label for="two">Two</label>
        <br>
        <span>Picked: {{ picked }}</span>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                picked:""
            },
        })
    </script>
    
    4.下拉选择器
    下拉选择器中的单选:
    <div id="app">
        <!--单选-->
        <select v-model="selected1">
            <option disabled value="">请选择</option>
            <option>A</option>
            <option value="b">B</option>
            <option>C</option>
        </select>
        <span>选择的是: {{ selected1 }}</span>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                selected1: "",
            },
        })
    </script>
    

    如果 v-model 表达式的初始值未能匹配任何选项,<select> 元素将被渲染为“未选中”状态。在 iOS 中,这会使用户无法选择第一个选项。因为这样的情况下,iOS 不会触发 change 事件。因此,更推荐像上面这样提供一个值为空的禁用选项。

    <option>是备选项,如果含有value属性,v-model就会优先匹配value的值,如果没有,就会直接匹配<option>的text,比如上面代码中,选中第二项的时候,selected1的值是b,而不是B(如下图所示):
    在这里插入图片描述

    下拉选择器中的多选:
    <div id="app">
        <select v-model="selected2" multiple>
            <option>A</option>
            <option value="b">B</option>
            <option>C</option>
        </select>
        <br>
        <span>选择的是: {{ selected2 }}</span>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                selected2: []
            },
        })
    </script>
    

    对于下拉选择器中的多选,在操作过程中:
    对于 windows:按住 Ctrl 按钮来选择多个选项。
    对于 Mac:按住 command 按钮来选择多个选项。

    在业务中,<option>经常用v-for动态输出,value是用v-bind来动态输出的,例如:

    <div id="app">
        <select v-model="selected">
            <option disabled value="">请选择</option>
            <option v-for="option in options"
                    v-bind:value="option.value">{{option.text}}
            </option>
        </select>
        <span>选择的是: {{ selected }}</span>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                selected: "",
                options: [
                    {
                        text: "HTML",
                        value: "html"
                    },
                    {
                        text: "JavaScript",
                        value: "js"
                    },
                    {
                        text: "CSS",
                        value: "css"
                    }
                ]
            },
        })
    </script>
    
    5.修饰符
    .lazy

    input输入框的change事件,要在 input 失去焦点的时候才会触发,而input 事件在用户输入时触发,它是在元素值发生变化时立即触发。

    在默认情况下,v-model在每次input事件触发后将输入框的值与数据进行同步(除了中文输入法的情况),可以添加.lazy修饰符,从而转变为使用change事件进行同步。

    <!-- 在“change”时而非“input”时更新 -->
    <input v-model.lazy="msg" >
    

    这时,msg并不是实时改变的,而是在失去焦点或者按回车时才更新。

    .number

    如果想自动将用户的输入值转换为数值类型,可以给v-model添加.number修饰符。
    这通常很有用,因为即使在 type=“number” 时,HTML 输入元素的值也总会返回字符串。

    div id="app">
        <p>{{message}}</p>
        <input v-model.number="message">
        <div v-on:click="aa">点击这里获取当前类型</div>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: ""
            },
            methods:{
                aa:function(){
                    console.log(typeof this.message)
                }
            }
        })
    </script>
    

    当输入数字后又输入非数字的字符时,最后的结果只会保留最开始输入的数字:
    在这里插入图片描述
    当最开始就输入非数字字符时,这个修饰符将不起任何作用,返回输入的值。即使后面再输入数字也被视做字符串:
    在这里插入图片描述

    .trim

    如果要自动过滤用户输入的首尾空白字符,可以给v-model添加.trim修饰符。

    <input v-model.trim="msg">
    

    参考:
    1.Vue.js官方文档
    2.《Vue.js实战》

    展开全文
  • 如何在vue3中优雅地使用v-model

    万次阅读 2020-09-25 20:09:59
    文章目录Vue中的数据绑定v-bindv-bind支持的类型v-bind使用v-modelvue2中v-model用法不使用v-model的双向绑定父组件子组件使用v-model后父组件子组件问题.syncvue2中使用v-model + .sync父组件子组件vue3中v-model的...

    ps:vue3中推荐使用的是reactive写法,文中这种格式只是为了和vue2做对照,只是为了凸显vue3中对v-model的改进,仅供参考。

    Vue中的数据绑定

    绑定数据有三种方式:

    • 插值,也就是{{name}}的形式,以文本的形式和实例data中对应的属性进行绑定
    • v-bind
    • v-model

    v-bind

    eg:v-bind:class 可简写为 :class

    当加上v-bind:之后,它的值classe不是字符串,而是vue实例对应的data.class的这个变量。也就是说data.class是什么值,它就会给class属性传递什么值,当data.class发生变化的时候,class属性也发生变化,这非常适合用在通过css来实现动画效果的场合。他只是单向变动

    v-bind支持的类型

    html中的属性、css的样式、对象、数组、number 类型、bool类型

    v-bind使用

    // 绑定文本
    <p v-bind="message"></p>
    
    // 绑定属性
    
    <p v-bind:src="http://...."></p>
    <p v-bind:class="http://...."></p>
    <p v-bind:style="http://...."></p>
    // 绑定表达式
    :class{className:true}
    

    v-model

    v-model 指令在表单 、 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理

    主要是用在表单元素中,它实现了双向绑定。在同时使用v-bind和v-model中,v-model建立的双向绑定对输入型元素input, textarea, select等具有优先权,会强制实行双向绑定。很多时候v-model使用在表单的<input>中实现双向绑定。

    v-model实现了表单输入的双向绑定,一般是这么写的:

     <div id="app">
         <input v-model="price">
     </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                price: ''
            }
        });
    </script>
    

    通过该语句实现price变量与输入值双向绑定

    实际上v-model只是一个语法糖,真正的实现是这样的:

    <input type="text" 
          :value="price" 
          @input="price=$event.target.value">
    

    以上代码分几个步骤:

    • 将输入框的值绑定到price变量上,这个是单向绑定,意味着改变price变量的值可以改变input的value,但是改变value不能改变price

    • 监听input事件(input输入框都有该事件,当输入内容时自动触发该事件),当输入框输入内容就单向改变price的值

    这样就实现了双向绑定。

    <input v-model="giveDate" />
    
    <input :value="giveDate" @input="giveDate = $event.target.value" /> 
    

    第一行的代码其实只是第二行的语法糖。

    vue2中v-model用法

    不使用v-model的双向绑定

    如下代码所示,这是不用v-model时候的写法。

    父组件使用v-bind给子组件中的props传值。

    子组件需要使用emit方法来实现子组件---->父组件方向上的绑定。

    父组件

    <!--父组件-->
    <template>
        <div>
            <!--在子组件中用emit("test")传达给父组件的getData方法中-->
            <search @test="getData" :keywords="keywords"></search>
            <button @click="submit">提交</button>
        </div>
    </template>
    <script>
    import search from '@/components/index/search.vue'
    export default {
        data() {
            return {
                keywords: ''
            }
        },
        components: {
            search
        },
        methods: {
            // 在这里实现更改父组件的值
            getData(val){
                this.keywords = val
            },
            submit() {
                console.log('keywords:', this.keywords)
            }
        }
    }
    </script>
    
    

    子组件

    <!--子组件-->
    <template>
        <div>
            <input @input="inputChange" type="text" name="keywords">
        </div>
    </template>
    <script>
    export default {
        props: ['keywords'],
        methods: {
            inputChange(e) {
              	// 传给父元素的test函数
                this.$emit('test', e.target.value)
            }
        }
    }
    </script>
    

    即,在父组件中,通过v-bind给子组件传参,同时指定v-on和指定修改目标值的函数。

    在子组件中,接受父组件v-bind传过来的值,实现父->子方向上的绑定,然后通过emit方法,向父组件传出$event.target.value,实现子->父方向上的绑定。

    使用v-model后

    父组件

    <!-- parent -->
    <template>
      <div class="parent"><p>父组件将传递给子组件的数据是:
        <input type="text" v-model="giveChildData"/></p>
        <Child v-model="giveChildData"></Child>
      </div>
    </template>
    <script>
    import Child from './Child.vue';
    export default {
      name: "Father",
      data() {
        return {
          todosth: 0,
          giveChildData: '儿子,爸要把家产传给你啊!'
        };
      },
      components: {
        Child
      }
    }
    </script>
    

    子组件

    <!-- child -->
    <template>
      <div class="child">
        <p>子组件将通过$emit调用父组件的函数并修改数据:{{ give }}</p>
        <span @mousemove="returnBackFn">答复</span>
      </div>
    </template>
    <script>
    export default {
      name: "Child",
      props: {
        give:
            {
              type: String,
              default: '0'
            }
      },
      model: {
        prop: 'give',
        event: 'returnBack'
      },
      methods: {
        returnBackFn() {
          this.$emit('returnBack', '啥家产?有矿啊!');
        }
      }
    };</script>
    
    
    

    这里的 giveChildData 的值将会传入这个名为 give 的 prop。同时当 <Child>触发一个 returnBack 事件并附带一个新的值的时候,这个 giveChildData 的属性将会被更新。

    问题

    但是当有多个数据需要父子组件之间双向绑定时,v-model只能传其中一个值。这时候需要使用.sync来实现其他数据的绑定。

    .sync

    从 2.3.0 起,vue重新引入了 .sync 修饰符,但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。
    示例代码如下:

    <comp :foo.sync="bar"></comp>
    

    会被扩展为:

    <comp :foo="bar" @update:foo="val => bar = val"></comp>
    

    当子组件需要更新 foo 的值时,它需要显式地触发一个更新事件:

    this.$emit('update:foo', newValue)
    

    实例如下。(弹窗的关闭事件)

    <template>
      <div class="details">
        <myComponent
            :show.sync='valueChild'
            style="padding: 30px 20px 30px 5px;border:1px solid #ddd;margin-bottom: 10px;"
        >
        </myComponent>
        <button @click="changeValue">toggle</button>
      </div>
    </template>
    <script>
    import Vue from 'vue'
    
    Vue.component(
        'myComponent', {
          template: `
            <div v-if="show">
            <p>默认初始值是{{ show }},所以是显示的</p>
            <button @click.stop="closeDiv">关闭</button>
            </div>`,
          props: ['show'],
          methods: {
            closeDiv() {
              this.$emit('update:show', false); //触发 input 事件,并传入新值
            }
          }
        })
    export default {
      data() {
        return {
          valueChild: true,
        }
      },
      methods: {
        changeValue() {
          this.valueChild = !this.valueChild
        }
      }
    }
    </script>
    

    效果如下图。

    img

    vue2中使用v-model + .sync

    由于v-model只能默认传进去一个值,剩下的需要使用.sync实现双向绑定。

    对于v-model传进来的数,子组件用emit方法向父组件的“input”传值(注:是v-model默认监听的方法)。

    而对于.sync传进来的数,则是通过在子组件中,使用emit向父组件的update:绑定数据名,进行传值(注:默认提供了update方法,当然也可以自己在父组件中自定义一个修改绑定值的函数)。

    父组件

    <h1>name01:{{ name01 }} </h1>
    <h1>age01:{{ age01 }} </h1>
    <model01
             :model="age01"
             :name.sync="name01"
             >
    </model01>
    ...
    
    <script>
    export default{
        data(){
            return{
                age01: 18,
                name01: "username"
            }
        }
    }
        
    </script>
    
    

    子组件

    <template>
      <div class="custom-input">
        <h1>vue2中的v-model</h1>
        <input
            type="text"
            :value="age"
            @input="$emit('input', $event.target.value)"
        />
        <!--上面的emit中的“input”是v-model默认监听的函数-->
        <br>
        <input type="text" :value="name" @input="$emit('update:name', $event.target.value)"/>
         <!--name使用的是.sync实现绑定的-->
      </div>
    </template>
    
    <script>
    export default {
      name: "Model01",
      props: [
        'age',
        'name'
      ],
      model:{
          
      }
      methods: {
      }
    }
    </script>
    
    <style scoped>
    
    </style>
    

    vue3中v-model的使用

    接下来就是正点了。

    父组件

    vue3中,将之前的v-model和.sync整合到一起了,并淘汰了.sync写法。

    现在,v-model在组件之间的使用再也不用像以前那样臃肿了,极其舒爽。

    只需要在v-model上指定传值。例如:

    <model02
    	v-model:age="age02"
    	v-model:name="name02"
     ></model02>
    

    这里就是将父组件中的age02变量传入到子模块的props中的age变量中。

    子组件只要使用如下调用update:age的方式,就能将age的变化由子组件的age传入到父组件的age02变量上。

    $emit('update:age', 传给父组件的值);
    
    ....
    <h1>name02:{{ name02 }} </h1>
    <h1>age02:{{ age02 }} </h1>
    <!--     vue3写法-->
    <model02
    	v-model:age="age02"
    	v-model:name="name02"
     ></model02>
    ....
    

    子组件

    <template>
      <div class="custom-input">
        <h1>vue3中的v-model</h1>
        <input type="text" :value="age" @input="onAgeInput"/>
        <br>
        <input type="text" :value="name" @input="onNameInput"/>
      </div>
    </template>
    
    <script>
    export default {
      name: "Model02",
      props: [
        'age',
        'name'
      ],
      methods: {
        onAgeInput(e) {
          this.$emit('update:age', parseFloat(e.target.value));
        },
        onNameInput(e) {
          this.$emit('update:name', e.target.value)
        }
      }
    }
    </script>
    
    <style scoped>
    
    </style>
    

    实现效果图:

    img

    总结

    vue3中的v-model比以前舒爽太多了!

    ps:vue3中推荐使用的是setUp()写法,上面这种格式只是为了和vue2做对照,只是为了凸显vue3中对v-model的改进,仅供参考。

    展开全文
  • 效果图展示 此组件有需要的同学可以直接复制使用 子组件 timerPickLimit.vue <!-- @name: 24 * 7时间选择器 @description: 主要作用于设备禁止登录时间选择 @Method: 使用v-model改进 ...timer-pick-limit v-model=
  • vue3 v-model的使用(多个 v-model 绑定)

    千次阅读 2020-09-30 17:23:27
    //父组件 setup(props) { const msg = ref("msg"); const foo = ref('123') ...HelloWorld v-model:foo="modelValue" v-model:message="msg"></HelloWorld> <!--子组件--!> <input
  • v-model在一个组件中只能用一次,即只能定义监听一个变量和事件 一下是一个tab切换组件 父组件 &lt;tab v-model="active" @change="change" :list="list"/&gt; 子组件 &...
  • v-model源码深入解析(超详细)

    千次阅读 2019-11-19 14:22:05
    抛出问题 我们先来看一下下面这段代码 <template> <div> <div class="message">{{ info.message }}<...input v-model="info.message" type="text"></div> <butt...
  • v-model 解析 和 自定义 v-model

    千次阅读 2018-11-02 14:15:38
    $emmit 和 $v-on vue 组件之间数据绑定是基于单项绑定的,想要父子组件之间的数据和行为的交互要使用 $emit和 $v-on。 &amp;lt;!-- child component --&amp;gt; &amp;lt;template&amp;gt; &...
  • 但是删除是有问题的,div里删除后,el-cascader绑定的v-model值会变更,但是界面上的el-cascader控件已选中内容却不会发生变更,找了资料未找到解决办法,最后通过setTimeout解决了该问题,但是有个瑕疵,每次在下面...
  • 一、v-model? https://segmentfault.com/a/1190000009492595   v-model 其实是一个语法糖,这背后其实做了两个操作 v-bind 绑定一个 value 属性 v-on 指令给当前元素绑定 input 事件 在原生表单元素...
  • 指令什么是指令参数修饰符常用指令v-modelv-bindv-forv-onv-if 和 v-showv-text可以用于提升性能的指令v-oncev-pre 什么是指令 指令 (Directives) 是带有 v- 前缀的特殊属性,指令的职责是,当表达式的值改变时,将...
  • Vue之表单与v-model

    千次阅读 2019-10-15 19:56:02
    Vue之表单与v-model小编分为五个部分:如下 (1)v-model基本用法 (2)单选框/按钮 (3)复选框/多选按钮 (4)下拉选择列表 (5)表单输入绑定修饰符 v-model基本用法 表单控件在实际业务较为常见,比如单选、...
  • Vue之v-model原理

    千次阅读 2019-10-22 14:47:45
    目标:1、了解v-model的本质。2、了解v-model的实现原理。 我们知道Vue的核心特性之一是双向绑定,vue的响应式原理是实现了数据->视图,接下来我们要学习视图->数据的原理。 v-model是一个指令,限制在<...
  • 文章目录基本概念基本使用v-model原理使用v-bindv-bind和v-on同时使用v-model结合radio使用v-model结合checkbox使用单选框多选框v-model结合select使用 基本概念 表单控件在实际开发中是很常见的,Vue中使用v-model...
  • Vue指令 v-model详解

    千次阅读 2019-07-02 22:12:46
    在一次的学习过程中,偶然发现v-model的一个“奇怪”使用方法,如下图: 描述: 在一个组件中,引入一个自定义组件input.vue。然后需要在父组件中操作input的输入框内容。父组件(index.vue)的子组件实例上定义了v-...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 353,815
精华内容 141,526
关键字:

v-model