【Vue样式绑定】

0

HTML样式的绑定无非就Class和Style的绑定,使用Vue的时候原生的绑定形式仍然可以使用,但是既然都使用了Vue了,还是建议遵循Vue的语法规范。

一. 绑定 HTML Class

1.1 对象语法

之前我们说过,html中绑定属性的方式是使用【v-bind】,那么 class 的绑定也一样

<body>
    <div id="app">
        <div v-bind:class="{ active: isActive }"></div>
    </div>
</body>

上面代码中我们使用【v-bind】为class绑定了一个对象,对象中 active 为class的名称,样式是否生效取决于 isActive 是否为真值。

<body>
    <div id="app">
        <div v-bind:class="{ active: isActive,important:isport }"></div>
        <!-- <div class="active"></div> -->
    </div>
</body>

<script>
    let vm = new Vue({
        el: "#app",
        data: {
            isActive: true,
            isport: false,
        }
    })
</script>

上面代码中我们为一个html绑定了多个class,但是只有 active 是生效的,因为 isport 的值为 false ,有了这样的语法之后,我可以直接通过控制数据来控制哪些样式生效。

【在属性的绑定中我们可以使用表达式或者计算属性】

<body>
    <div id="app">
        <div v-bind:class="getClass()"></div>
        <!-- <div class="active"></div> -->
    </div>
</body>

<script>
    let vm = new Vue({
        el: "#app",
        data: {
            isActive: true,
            isport: false,
        },
        methods: {
            getClass() {
                return {
                    active: this.isActive,
                    important: this.isport
                }
            }
        }
    })
</script>

上面代码中我们在class的绑定中使用了表达式,表达式是一个函数的调用,在函数中我们可以定义更加复杂的样式逻辑和样式列表。

<body>
    <div id="app">
        <div v-bind:class="classList"></div>
        <!-- <div class="active"></div> -->
    </div>
</body>

<script>
    let vm = new Vue({
        el: "#app",
        data: {
            isActive: true,
            isport: false,
        },
        computed: {
            classList() {
                return {
                    active: this.isActive,
                    important: this.isport
                }
            }
        }
    })
</script>

上面代码中我们使用【计算属性】同样定义了一个样式对象,在计算属性逻辑中我们也可以定义更加复杂的样式列表,有了表达式和计算属性为我们的样式绑定提供了个更加强悍的功能。


1.2 数组语法

上面介绍了对象的语法,可以说很强悍,那么我再整理一下数组绑定样式的写法。

<body>
    <div id="app">
        <div v-bind:class="[isActive,isport]"></div>
        <!-- <div class="active important"></div> -->
    </div>
</body>

<script>
    let vm = new Vue({
        el: "#app",
        data: {
            isActive: "active",
            isport: "important",
        }
    })
</script>

上面代码中通过数组的方式定义绑定了2个class属性,其实就是构成了【data】属性值到样式名称之间的映射。
我们同样也可以在数组语法中使用表达式,引用官网的一个例子

<div v-bind:class="[isActive ? activeClass : '', errorClass]">

上面代码中class中始终有 errorClass ,但是 activeClass 是否添加取决于 isActive 是否为真值。

【总结!!】Class的绑定总觉得数组的形式过于繁琐,我们需要定义很多映射关系属性,所以从简洁的角度出发,建议还是使用【对象】的形式。

1.3 组件绑定Class

如果知道组件,那就看一下,不知道的就先跳过吧。
当我们为组件添加class的时候,所有的class会被添加到组件的【根元素上】面,这个根元素上面已经有了的class不会被覆盖。

我们先定义一个组件

Vue.component('hello', {
    template: `
        <div class="root">
            <h1>Hello</h1>
        </div>
    `
})

接下来应用组件,并添加Class

<body>
    <div id="app">
        <hello class="later"></hello>
    </div>
</body>

<script>
    let vm = new Vue({
        el: "#app",
    })
</script>

渲染的结果如下

<body>
    <div id="app">
        <div class="root later">
            <h1>Hello</h1>
        </div>
    </div>
</body>

上面代码中,later被添加到了 hello 组件的【根节点】上,上面我们是用的原生的 Class 进行绑定的,接下来我们换成Vue的绑定形式,会发现其实效果是一样的,也是绑定到了【根节点】上面。

<body>
    <div id="app">
        <hello :class="{later:isLater}"></hello>
    </div>
</body>

<script>
    let vm = new Vue({
        el: "#app",
        data: {
            isLater: true
        }
    })
</script>

二. 绑定内联样式

上面介绍了Class的绑定,我再总结一下内联样式的绑定

2.1 对象语法

在Class的绑定中,对象的属性是Class名称,属性值用于判断该Class是否生效;在内联样式的绑定中,属性是【样式名】,属性值是【样式值】

<body>
    <div id="app">
       <h1 :style="{color:colorVal,fontSize:sizeVal}">BLUE</h1>
       <!-- <h1 style="color: blue; font-size: 20px;">BLUE</h1> -->
    </div>
</body>

<script>
    let vm = new Vue({
        el: "#app",
        data: {
            colorVal: 'blue',
            sizeVal:"20px"
        }
    })
</script>

上面代码将样式对象直接绑定到了HTML元素中,短横线分割的命名被改成了驼峰命名,Vue1.0中这个要求是比较严格的,但是Vue2.0中支持了短横线的命名规则。

上面我们在绑定Class的时候使用了【计算属性】和【表达式】的形式,在内联样式中我们也来玩一下

<body>
    <div id="app">
        <h1 :style="styleList">BLUE</h1>
        <!-- <h1 style="color: blue; font-size: 20px;">BLUE</h1> -->
    </div>
</body>

<script>
    let vm = new Vue({
        el: "#app",
        data: {
            colorVal: 'blue',
            sizeVal: "20px"
        },
        computed: {
            styleList() {
                return {
                    color: this.colorVal,
                    fontSize: this.sizeVal
                }
            }
        }
    })
</script>

上面代码使用【计算属性】返回一个对象,用于内联样式,表达式就不演示了,和Class的绑定基本是一样的。

2.2 数组语法

内联样式的数组语法其实就是将对各样式对象用于一个HTML元素,数组中是一个一个的对象

<body>
    <div id="app">
        <h1 :style="[styleList,anotherList]">BLUE</h1>
       <!--  <h1 style="
                    color: blue; 
                    font-size: 20px; 
                    font-weight: bold; 
                    background-color: gray;">BLUE</h1> -->
    </div>
</body>

<script>
    let vm = new Vue({
        el: "#app",
        data: {
            colorVal: 'blue',
            sizeVal: "20px",
            backgroundColor: 'gray',
            fontWeight: "bold"
        },
        computed: {
            styleList() {
                return {
                    color: this.colorVal,
                    fontSize: this.sizeVal
                }
            },
            anotherList() {
                return {
                    backgroundColor: this.backgroundColor,
                    fontWeight: this.fontWeight
                }
            }
        }
    })
</script>

上面代码定义了两个【计算属性】返回两个样式对象,然后绑定到内联样式的数组中,最后解析成注释的那样子。总感觉数组形式的绑定挺麻烦的,反正我不大喜欢用数组进行绑定,但是在分离样式对象的时候还是挺有用的。


如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

载入中...