精华内容
下载资源
问答
  • 一个组件身上只能有一个v-module 但是.sync修饰符能有多个 v-model的原理 <com1 v-model="num"></com1> 等价于 <com1 :value="num" @input="(val)=>this.num=val"></com1> .sync修饰...

    先说一下他们最主要的区别吧

    一个组件身上只能有一个v-module  但是.sync修饰符能有多个 

    v-model的原理

    <com1 v-model="num"></com1>
    等价于
    <com1 :value="num" @input="(val)=>this.num=val"></com1>

    .sync修饰符的原理

    正常父传子: 
    <com1 :a="num" :b="num2"></com1>

     加上sync之后父传子: 
    <com1 :a.sync="num" .b.sync="num2"></com1> 

     它等价于
    <com1 
      :a="num" @update:a="val=>num=val"
      :b="num2" @update:b="val=>num2=val"></com1> 

    相当于多了一个事件监听,事件名是update:a,回调函数中,会把接收到的值赋值给属性绑定的数据项中。

    .sync与v-model区别是

    相同点:都是语法糖,都可以实现父子组件中的数据的双向通信。

    区别点:

    • 格式不同。 v-model="num", :num.sync="num"
    • v-model: @input + value
    • :num.sync: @update:num
    • v-model只能用一次;.sync可以有多个
       
    展开全文
  • v-modle基础理解和使用 tips:v-model 是一个vue指令限制使用在input select textarea components 中使用 一、原理的大致理解 二、在自建组件中的使用 原理的大致理解 v-model 本身是一个语法糖, 可以笼统的理解为...

    model 语法糖

    tips:v-model 是一个vue指令限制使用在input select textarea components 中使用
    一、原理的大致理解
    二、在自建组件中的使用
    原理的大致理解

    v-model 本身是一个语法糖, 可以笼统的理解为,在vue编译执行的时候 看到v-model 之后, 自动添加 绑定事件 和 监听事件。
    以下代码为例:

    // An highlighted block
    <template>
      <input type="text" v-bind="msg">
      </input>
    </template>
    
    <script>
    export default {
      data() {
        return {
          msg: '',
        };
      },
    };
    </script>
    

    编译之后的代码:

    <template>
      <input type="text"
             v-bind:value="msg"
             v-on:input="msg=$event.target.value">
      </input>
    </template>
    
    <script>
    export default {
      data() {
        return {
          msg: ""
        };
      }
    };
    

    有过一定基础的小伙伴可以看到, input 中绑定了input的value 属性 和 监听了input的输入事件。 并且执行了msg = $event.target.value; 这个方法。

    在自建组件中的使用

    创建组件代码

    et Child = {
      template: `<div> 
                  <input :value="value" @input="updateValue" placeholder="edit me"/>
                </div>`,
      props: ['value'],
      methods: {
        updateValue(e) {
          this.$emit('input', e.target.value);  // 这里使用到子组件向父组件传值的方法
        }
      },
    }
    let vm = new Vue({
      el: '#app',
      template: `<div>
      <child v-modle="msg"></child>
      <p> {{msg}}<p>
      </div>`,
      data() {
        return {
          msg: '',
        }
      },
      components: {
        Child
      }
    })
    

    Vue 编译之后的代码, 主要是父级发生变化

    let vm = new Vue({
      el: '#app',
      template: `<div>
      <child v-bind:value="msg" @input="msg = argumrnts[0]"></child>
      <p> {{msg}}<p>
      </div>`,
      data() {
        return {
          msg: '',
        }
      },
      components: {
        Child
      }
    })
    

    这里代码,子组件传递的value 与 父组件 的msg 绑定, 子组件中会通过事件 将值传递给父组件。
    这里就有了典型的父子组件通信。 父组件通过props绑定 把 msg值 传递给子组件 value 接受,子组件中 input 输入事件触发 $emit事件派发给父组件。
    父组件中绑定的事件 接收到 子组件的传递的值。实现了,数据双向绑定。

    展开全文
  • v-modle 原理解析

    2020-06-13 13:55:13
    v-model借助元素的 value 属性和 input 事件实现双向绑定 第一行的代码其实只是第二行的语法糖。 <input v-model="sth" /> <input v-bind:value="sth" v-on:input="sth = $event.target.value" /> vue....

    v-model借助元素的 value 属性和 input 事件实现双向绑定
    第一行的代码其实只是第二行的语法糖。

    <input v-model="sth" />
    <input v-bind:value="sth" v-on:input="sth = $event.target.value" />
    

    vue.js定义

      new Vue({
            data{
                str:"我很帅"
            }
        })
    

    然后第二行代码可以简写成这样

    <input :value="sth" @input="sth = $event.target.value" />
    

    要理解这行代码 需知道input 有一个oninput事件 每当输入框内容发生变化时,就会触发oninput,把最新的value传递给 sth。
    v-model用在组件上时
    组件描述:父组件的 price 的初始值是 100,更改子组件的值能实时更新父组件的 price

    <div id="demo">
     <currency-input v-model="price"></currentcy-input>
    
     <span>{{price}}</span>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.3.0/vue.js"></script>
    <script>
    Vue.component('currency-input', {
     template: `
      <span>
       <input
        ref="input"
        :value="value"
        @input="$emit('input', $event.target.value)"
       >
      </span>
     `,
     props: ['value'],// 为什么这里要用 value 属性,value在哪里定义的?貌似没找到啊?
    })
     
    var demo = new Vue({
     el: '#demo',
     data: {
      price: 100,
     }
    })
    </script>
    
    展开全文
  • 效果如下: 代码如下(代码里没有引入vue库,注意): ...input type="text" v-model = "n1"> <select v-model = "opt"> <option value="+">+</option> <option value="-">-&l...

    效果如下:
    计算器
    代码如下(代码里没有引入vue库,注意):

    <div id="app">
    		<input type="text" v-model = "n1">
    		<select v-model = "opt">
    			<option value="+">+</option>
    			<option value="-">-</option>
    			<option value="×">×</option>
    			<option value="÷">÷</option>
    		</select>
    		<input type="text" v-model = "n2">
    		<input type="button" value="=" @click = "calc">
    		<input type="text" v-model = "result">
    	</div>
    	<script>
    		var vm = new Vue({
    			el:'#app',
    			data:{
    				n1: 0,
    				n2: 0,
    				result: 0,
    				opt:'+'
    			},
    			methods:{
    				calc(){
    					switch(this.opt){
    						case '+':
    						this.result = parseInt(this.n1) + parseInt(this.n2)
    						break;
    						case '-':
    						this.result = parseInt(this.n1) - parseInt(this.n2)
    						break;
    						case '×':
    						this.result = parseInt(this.n1) * parseInt(this.n2)
    						break;
    						case '÷':
    						this.result = parseInt(this.n1) / parseInt(this.n2)
    						break;
    					}
    				}
    			}
    		})
    	</script>
    

    其实还有一个简单的方法

    //这里只改动methods部分
    methods: {
    	calc() {
    		var codeStr = 'parseInt(this.n1)' +this.opt+'parseInt(this.n2)'
    		this.result = eval(codeStr)
    		//eval()可以计算某个字符串,并执行其中的JavaScript代码
    	}
    }
    
    展开全文
  • 1.v-modle:双向绑定 通过修改checked的值可以控制复选框的选中状态,通过点击复选框选中或者取消选中复选框可以修改checked的值。 2.value:单项绑定 只能通过修改checked值改变其选中状态,不能通过点击复选框改变...
  • 主要给大家介绍了关于利用vue组件自定义v-model实现一个Tab组件的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
  • Vue v-modle理解

    2020-06-20 21:12:07
    其实v-model简单说就是把:value=''和@input=''一起用。:value绑定展示,@input监听input的值变化并复制 例如以下代码: <input v-model="userName">的效果等同与<input :value="userName" @input=...
  • 我现在是利用v-modle双向绑定的父子组件,请求接口和编辑数据已经实现了,现在出现一个问题是 后端调用接口返回的数据为何不显示出来,还是什么方法才可以 <template> <div class="Contentarea"> ...
  • -- 创建id为app的根组件 --> <div id="app"> <p v-text='name'></p> <p v-text='age'></p> <p v-text='age'></p> <p v-text='age'></p> <input type="text" v-modle='height' /> </div> <script> // 定义数据 let ...
  • v-modle

    2018-10-19 17:36:00
    自定义元素上使用v-model="theFunction", 同时,组件里使用model {prop:xxx, event:xxx} 可以把 model 里面定义的 prop和event 自动绑定在 "theFuntion" 这个自定义事件上 转载于:...
  • v-modle可以分解为 value=“值” 父传子 @input=“值” 子传父 其余的和父传子和子传父差不多,记住value,input是默认值,假如要修改要在export default里面配置,具体如下: model: { prop: “把value更改的规则...
  • 初学者疑问,就是现在我数据库里有tno1,tno2.....tno5,和tname1,tname2.....tname5,我想用一个el-select来分别让这几个tname出现在选项上,...不太清楚该怎样用v-modle绑定</p>
  • 父子通信用v-bind 子组件 <template> <div @click="chanage">子级message:{{ message }}</div> </template> <script> export default { props: { message: { type: Strin...
  • 主要介绍了浅谈vue中关于checkbox数据绑定v-model指令的个人理解,v-model用于表单的数据绑定很常见,下面就来详细的介绍一下
  • 自定义组件使用v-modle

    2019-12-07 11:19:33
    父组件 <template> <div class="parent"> <...我是父组件, 对子组件说: {{data}}<...Child v-model="data"></Child> </div> </template> <script> import Child fr...
  • 笔者今天在开发中遇到一个看起来很神奇的问题,平时编辑的页面我们select下拉选框利用vue.js 的v-model来实现自动选中,今天无论如何都选不中,后来经过很久的复查和大神的一句话终于解决这个这个问题,顺便分享一下...
  • 1.数据的读取 {{}} (在DOM内容区域使用) 2.数据读取使用 v-bind 指令 (在属性中使用) 3.数据的双向绑定 v-model
  • v-on v-on是用来绑定事件的,比如给按钮添加点击事件,我们可以写成v-on:click='handle',也可以简写为@click='handle'。 v-bind v-bind用来绑定文本或属性,绑定文本跟v-text差不多,能够绑定的属性有html中的属性...
  • <input type="number" v-model.number="messageNumber" /> 12 <p>{{ typeof messageNumber }}</p> 13 <input type="text" v-model.trim="messageTrim" /> 14 <p>{{ messageTrim }} 15 16 <!-- 开发...
  • vue 中v-model原理及应用

    万次阅读 多人点赞 2019-01-11 19:21:43
    在官网我们可以得知,v-model只是语法糖而已。 语法糖:也译为糖衣语法,主要是方便程序员使用,通常来说使用语法糖能够增加程序的可读性,从而减少程序代码出错的机会。 v-model在input元素上时 第一行的代码...
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ...meta name="viewport" content="width=device-width, initial-scale=1.0">...D.

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,932
精华内容 1,172
关键字:

v-modle