网站设计 成都,导入wordpress 演示数据,wordpress首页搭建,网站模板在线演示怎么做在实际项目中#xff0c;经常会遇到这样的场景#xff0c;可以通过逻辑层中设定的变量#xff0c;在视图层中来呈现不同的样式#xff0c;那么这种动态绑定样式的方式如何实现呢#xff1f; 本篇文章#xff0c;博主将和大家分享动态绑定内联样式style 和 动态绑定内部和…在实际项目中经常会遇到这样的场景可以通过逻辑层中设定的变量在视图层中来呈现不同的样式那么这种动态绑定样式的方式如何实现呢 本篇文章博主将和大家分享动态绑定内联样式style 和 动态绑定内部和外部样式class 的几种常用的方法。 希望走过路过的客观多多指教并使用您发财的小手留下您宝贵的肯定。
注意测试以vue2.0的选项式写法为例首先在逻辑层的data中预置变量 export default{name:,data(){return{activeId:1,activeAvatarName:dongdong,classObj:{active:true,disabled:false},isActive:true,isRefresh:true,activeColor:red,width:16,activeStyles:{color:red,fontSize:14px},otherStyles:{}, boxColor:red}},computed:{classObj:function(){return {active:this.isActive,refresh:this.isRefresh}}}}一、动态绑定内联样式 style
1.1、对象方式绑定 方式1 :对象中使用变量赋值 div :style{color:activeColor,width:widthpx}/div方式2对象中使用三目运算符 div :style{color:(index16?activeColor:#000)}/div1.2、数组方式绑定 方式1数组中实现全部的动态绑定 div :style[activeStyles,otherStyles]/div方式2数组中可以实现部分动态绑定部分静态赋值 div :style[{color:(index16?activeColor:#000)},{fintSize:18px}]/div1.3、三目运算符方式绑定
方式1三目运算可以写在括号中也可以删除括号div :style{color:(index1?boxColor:#000)}/divdiv :style{color:index1?boxColor:#000}/div方式2数组中使用三目运算需要写在对象中div :style[{color:(index1boxColor:#000)},{pointer-events:none}]/div方式3也可以字符串的方式书写三目运算div :styleitem.avatarNameactiveAvatarName?font-weight:700:font-weight:400/div二、动态绑定内外部样式 class
2.1、对象方式绑定 类的名称一般都是用字符串比如active , 以下表达式判断元素是否绑定一个名叫active的类 div :class{active:isActive}/div
div :class{active:boxColorred{{name}}/div
div :class{active:activeIditem.uid}{{item.userName}}/div可判断并绑定多个类用逗号隔开 div :class{active:isActive,refresh:isRefreshr}/div可放在data里造一个对象出来 div :classclassObj{{name}}/div使用computed属性 根据data里的值变化 div :classclassObject{{name}}/div2.2、数组方式绑定 使用单纯的数组 div :class[isActive,isRefresh]{{userName}}/div数组与三目运算符相结合注意动态绑定的style三目运算只能写在对象中而数组方式动态绑定的class可以在数组中使用三目运算 :class[isActive?active:]元素需要的类名一定要加 双引号如果这个类名写在对象中可以不加 :class[{active:isActive},disabled]
