vue 计算后绑定 css,Vue.js样式动态绑定实现小结

在项目中,我们时常会遇到动态的去绑定操作切换不同的CSS样式,结合自身项目中遇到的一些情况,也参考了一些文档,针对vue.js样式的动态绑定切换做出如下小结:

动态切换的核心思想:

利用vue指令v-bind来实现动态绑定,从而设置切换不同的样式~

vue的最大特点是数据驱动,利用特殊的语法将DOM“绑定”到底层数据,DOM与数据保持同步,每当数据发生变化,DOM视图就会做出相应的更新和响应,正是基于这种特性,我们得以实现class和style的动态绑定~

(一定要充分理解数据驱动的含义,共勉~)

特别说明:

1. v-bind在处理class和style时,专门增强了它。表达式的结果类型不仅可以是字符串,还可以是对象和数组。

v-bind用于绑定属性和数据 ,其缩写为“ : ” 也就是v-bind:id === :id 。

根据不同的项目需求和不同的实现思路,现初步总结了如下方法:

(欢迎小伙伴们补充添加,一起进步~~)

class属性绑定

1. 三目元算符方式:

.class_a,.class_b{

/*这里可以写一些公共样式*/

}

.class_a{

/*这里写需要设置的第一种样式*/

}

.class_b{

/*这里写需要设置的第二种样式*/

}

2. 基本绑定:

export default {

name: "test1",

data(){

return{

isActive:true

}

}

}

.class_a{

/*这里写需要设置的样式*/

}

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

特别说明:

1. vue 的分隔符默认是 {{ }}, 在分隔符里面的字符串会被认为是数据变量,可以通过 class="{{ className }}" 方式设置class,但是vue不推荐这种方式与 v-bind:class 的方式混用,二者只能选其一。

2. v-bind:class 虽然与class属性里绑定变量的方式不能共存,却可以与原生的class特性共存,即 一个DOM标签中允许同时出现原生class和v-bind:class。

3. 为了避免不必要的问题,要写在data中的值尽量不要用中划线,可以采用下划线~如果data中用中划线的话,需要加单引号,否则出错,而且,在v-bind中使用时,也需要加单引号。加上单引号又无法识别数据,默认为true。

3. 可以传入多个属性动态切换多个class

4. 对象绑定

export default {

name: "test1",

data(){

return{

classObject:{

class_a:true,

class_b:true

}

}

}

}

.class_a{

/*这里写需要设置的第一种样式*/

}

.class_b{

/*这里写需要设置的第二种样式*/

}

特别说明:

这里v-bind直接利用对象进行绑定,需注意对象中的键名应与class样式名保持一致。

5. 数组绑定

数组里的变量改变时,动态更新class列表

export default {

name: "test1",

data(){

return{

classA:'class_a',

classB:'class_b'

}

}

}

.class_a{

/*这里写需要设置的第一种样式*/

}

.class_b{

/*这里写需要设置的第二种样式*/

}

6. 绑定返回对象的计算属性

强大且常用的模式~

export default {

name: "test1",

data(){

return{

isActive:true

}

},

computed:{

classObject:function () {

return{

class_a:this.isActive,

class_b:!this.isActive

// 这里要结合自身项目情况修改填写

}

}

}

}

.class_a{

/*这里写需要设置的第一种样式*/

}

.class_b{

/*这里写需要设置的第二种样式*/

}

style属性绑定(内联)

1. 直接设置样式

export default {

name: "test1",

data(){

return{

selectedColor:pink,

fontSize:20

// 注意前后名称的一致性

}

}

}

2. 也可以使用对象

(可以参照上述class)

export default {

name: "test1",

data(){

return{

styleObject{

selectedColor:pink,

fontSize:20

}

}

}

}

3. 使用数组

export default {

name: "test1",

data(){

return{

styleA:{

color:'red',

fontSize: '30px'

},

styleB:{

color:'green',

fontSize: '15px'

},

}

}

}

小伙伴们可根据上述方法结合自身项目情况修改调用,如有问题,欢迎交流

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2021 CSDN 皮肤主题: 1024 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值