Vue.js样式绑定

布满荆棘的人生 2022-05-10 06:34 211阅读 0赞

样式绑定

class和style时html元素的属性，可以使用v-bind来进行样式的yi绑定，以设置样式。

v-bind在绑定class和style时，Vue专门增强了它。结果类型不仅可以时字符串，还可以是对象和数组。

class属性绑定

1：基本使用：

<style>

.static\{...\}

.class1\{...\}

//最好不使用中划线

//.class2-abc\{...\}

.class2\_abc\{...\}

</style>

</div>

new Vue(\{

el: '\#app',

data: \{

isActive1: true,

//注意，如果data中使用中划线的话，需要加单引号。否则出错。而且，在v-bind中使用时，也需要加单引号。加上单引号又无法识别数据，默认为true。

//所以，尽量不要在data中使用中划线。

//下划线没问题。

//is-active2:true

is\_active2:true

\});

</script>

以上可以根据isACtive的值，动态判断来进行class样式的绑定。

提示：为了避免不必要的问题，data中和style中的class，最好不要用中划线。

2：也可以绑定多个

</div>

这里，会把v-bind动态绑定的class合并到前面的class中。

3：使用对象

</div>

new Vue(\{

el:'\#app',

data:\{

classObject:\{

class1:true,

class2\_abc:true

\});

</script>

这里，v-bind中直接使用对象进行绑定。与前面不同的时，对象中的键应该和style中定义的class样式名对应。虽然可以使用中划线，用引号括起来。但是同样不建议。

其实很好理解，把v-bind中的对象直接替换为\{class1:true,class2\_abc:true\}，这和前面两个是相同的。

4：使用数组

</div>

new Vue(\{

el:'\#app',

data:\{

classArr1:'class1',

classArr2:'class2\_abc'

\});

</script>

这里，v-bid中使用数组进行绑定。可以理解为将data中的属性值替换到了class中。

5：使用计算属性

这是强大且常用的方式。

</div>

new Vue(\{

el:'\#app',

data:\{

isActive:true,

error:null

\},

computed:\{

classObject:function()\{

return\{

class1: this.isActive && !this.error,

class2\_abc: !this.error && this.error == null

\});

</script>

用法就是这样，可以借助计算属性做一些复杂的逻辑判断等等。

style属性绑定

1：直接设置样式：

<div v-bind:style="\{color: activeColor, fontSize: fontSize + 'px'\}">vue学习</div>

</div>

new Vue(\{

el:'\#app',

data:\{

activeColor:green,

fontSize:50

\})

</srcipt>

使用清晰明了。需要注意的就是v-bind中属性名和css中样式的对应。如fontSize 对应font-size。

2：也可以直接使用对象

<div v-bind:style="styleObject">vue学习</div>

</div>

new Vue(\{

el:'\#app',

data:\{

styleObject:\{

color:'green',

fontSize:'30px'

\});

</script>

与直接使用类似，只是要注意对象的属性和css中的样式对应。

3：同样可以使用数组

<div v-bind:style="\[styleArr1,styleArr2\]">vue学习</div>

</div>

new Vue(\{

el:'\#app',

data:\{

styleArr1:\{

color:'green',

fontSize:'30px'

\},

styleArr2:\{

fontSize:'bold'

\});

</script>

Vue.js样式绑定

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 vuejs日常-绑定滚动事件

相关动态样式绑定定时器

相关 angular 动态绑定样式

相关 vue样式绑定切换

相关 Vue_样式绑定

相关 vuejs Class 与 Style 绑定

相关 Vue.js样式绑定

相关 VUE 样式绑定

相关 Vue-样式绑定

相关 Vue - 样式绑定