• v-bind 与 b-model 的异同


    一、相同点:两者都能实现数据绑定

    1、v-bind

    v-bind 简写为英文的冒号 :,它的用法是后面加冒号,跟上html元素的attributions,例如

    <p v-bind:class="myclass">
    

    解读:以上代码如果不加 v-bin: 这这个p标签有一个类叫myclass,没有任何数据参与进来。当加上v-bind:之后,就不一样了。它的值classed不是字符串,而是vue实例对应的data.classed的这个变量。也就是说data.classed是什么值,它就会给class属性传递什么值,当data.classed发生变化的时候,class属性也发生变化,这非常适合用在通过css来实现动画效果的场合。除了class,其他大部分html原始的属性都可以通过这种方式来绑定,而且为了方便,它可以直接缩写成冒号形式,

    var app = Vue({
      el: '#app',
      template: '<img :src="src">',
      data: {
        src: '',
      },
      beforeMount() {
        fetch(...).then(...).then(res => this.src = res.src) // 这里修改了data.src
      },
    })
    

    上面这段代码中,默认情况下data.src是空字符串,也就说不会有图片显示出来,但是当从远端获取到图片地址之后,更新了data.src,图片就会显示出来了。

    2、v-model

    v-model主要是用在表单元素中,它实现了双向绑定。双向绑定大家都非常熟了,简单的说就是默认情况下,它跟上面两种情况的数据绑定是一样的,实例的data.name发生变化的时候,对应的试图中也会发生变化。但是v-model绑定后,它还会反过来,在input中手动输入新的内容,会反过来修改data.name的值,如果在视图中其他地方使用到了data.name,那么这个地方就会因为data.name的变化而变化,从而实现关联动态效果。

    var app = Vue({
      el: '#app',
      template: '<label><input v-model="name">{{name}}</label>',
      data: {
        name: '',
      },
    })
    

    上面<input>中绑定了name,那么当input的value发生变化时,data.name就会跟着发生变化,而data.name变化了{{name}}的地方也会跟着变化。

    v-model是一种双向绑定,那么也就是说,你绑定的元素得有机会改变值。所以实际上v-model基本上只会用在input, textarea, select这些表单元素上。

    不同点:

    1. v-bind是数据绑定,没有双向绑定效果,但不一定在表单元素上使用,任何有效元素上都可以使用;
    2. v-model是双向绑定,基本上只用在表单元素上;
    3. 当v-bind和v-model同时用在一个元素上时,它们各自的作用没变,但v-model优先级更高,而且需区分这个元素是单个的还是一组出现的。

    参考文档:vue中v-model和v-bind绑定数据的异同

  • 相关阅读:
    三种按键处理函数
    enum与typedef enum的用法
    PIC18F中断定时器
    .net core Ocelot+Consul实现网关及服务注册和服务发现
    wpf的优点
    ASP.NET Core Web API下事件驱动型架构的实现
    2020个人计划
    图解C#的值类型,引用类型,栈,堆,ref,out
    .NET Core中的一个接口多种实现的依赖注入与动态选择
    redis分布式锁深度剖析
  • 原文地址:https://www.cnblogs.com/qingheshiguang/p/14661663.html
Copyright © 2020-2023  润新知