美文网首页
Vue | 插值操作 | 如何将数据插入到元素属性上

Vue | 插值操作 | 如何将数据插入到元素属性上

作者: cemcoe | 来源:发表于2020-03-10 21:00 被阅读0次

    上一篇 Vue | 插值操作 | 如何将数据弄到DOM中 讲的是网页上看得见的内容的插入操作。这篇就看一看网页中那些看不见的地方如何进行插入。

    这里看不见的地方的术语名为属性。

    涉及的内容

    • src alt class
    • class 对象绑定写法

    在真实的开发中 src 什么的肯定都是不能写死的,都是从服务器上请求来的,可能是一个 json 数据,包含很多的 url 。

    这是要对它们进行绑定就要用到 v-bind 指令了。

    几个例子:

    v-bind:href
    v-binf:src

    这里假设从服务器请求到的数据如下:

    data: {
            link: "https://www.jianshu.com/u/e20f22d3e8d3"
        }
    

    来尝试绑定一下,是这样的:

    <a v-bind:href="link">cemcoe</a>
    

    经过上面的一番操作,代码会被解析成如下的 html,即一个 a 标签

    <a href="https://www.jianshu.com/u/e20f22d3e8d3">cemcoe</a>


    鉴于上边的绑定语法在开发中经常使用,Vue 为其定义了语法糖:直接冒号,开发使用

    v-bind:href === :href
    v-bind:src === :src


    class 同 src alt 一样,本身也是一个属性,那么如果要对其进行绑定的话,上面的方法自然也是可以勉强试一试的。

    仿照一般属性的绑定方法,class 绑定如下:

    <h1 v-bind:class="myClass">{{name}}</h1>
    
    // ---data---
    data: {
            name: "cemcoe",
            myClass: "green"
        }
    

    这样当然可以将 green 绑定到 class 上,但如果这样干,为啥要多此一举,直接写在 class 里岂不是更香。基于以上认知,工作中并不常用这种方式来绑定 class,class 是一个特殊的属性,这里会对它特殊照顾。

    与其它属性不同的是,class 还有对象写法和数组写法【也不常用】。
    下面来看一看对象的写法。


    动态绑定 class 的对象写法

    <h1 v-bind:class="{green: isGreen, border: isBorder}">{{name}}</h1>
    // ----data----
    data: {
            name: "cemcoe",
            isGreen: true,
            isBorder: false
        }
    

    通过布尔值来决定是否添加对应的 class,与一般属性的绑定相比,这种绑定方式可以动态地进行调整,这非常关键,因为在开发中不断地变换 class 是一个经常要用到的操作。


    虽然上面的对象写法和一般的绑定方式相比增加了动态性,但 {green: isGreen, border: isBorder} 这种格式放在 html 中,从视觉上有点长;从可维护方面上看,也没有将逻辑和 html 分离。

    前端强调结构,样式和行为彼此分离,彼此不要有太多的杂糅。

    这时就可以考虑更加可维护的方式:

    <h1 v-bind:class="getClasses()">{{name}}</h1>
    // ---data---
    data: {
            name: "cemcoe",
            isGreen: true,
            isBorder: false
        },
    methods: {
        getClasses() {
            return {green: this.isGreen, border: this.isBorder}
        }
    }
    

    如上,用了一波 methods 字段,这个字段是干嘛的,有空填。

    这里将 class 切换的逻辑从 html 中抽离到了 js 中的 methods 中的字段,这样就做到了逻辑和结构相分离的效果。

    在接到需求变更时,找到 js 代码进行修改就好,可以快速进行定位。


    数组语法绑定 class 用的较少,不展开,感兴趣的可直达官网。

    来个总结:
    绑定属性采用 v-bind 指令,有颗语法糖是 :,Vue 对 class 的绑定开了一个门,可以使用对象写法,借助布尔值来判断。为了可维护性可以将判断逻辑抽离到 js 中,尽量保持结构,样式和行为相分离的效果。

    这里是连载 化学小子的前端实验册 的第 17 篇,欢迎关注。

    相关文章

      网友评论

          本文标题:Vue | 插值操作 | 如何将数据插入到元素属性上

          本文链接:https://www.haomeiwen.com/subject/eozidhtx.html