大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
使用v-bind:class或者v-bind:style或者直接通过操作dom来对其样式进行更改;
创新互联建站长期为上千余家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为岱岳企业提供专业的网站设计、做网站,岱岳网站改版等技术服务。拥有10多年丰富建站经验和众多成功案例,为您定制开发。
1.v-bind:class || v-bind:style
其中v-bind是指令,: 后面的class 和style是参数,而class之后的指在vue的官方文档里被称为'指令预期值'(这个不必深究,反正个人觉得初学知道他叫啥名有啥用就好了)同v-bind的大多数指令(部分特殊指令如V-for除外)一样,除了可以绑定字符串类型的变量外,还支持一个单一的js表达式,也就是说v-bind:class的'指令预期值'除了字符串以外还可以是对象或者数组(‘v-bind:'中的v-bind可省略)。
1.1:对象语法:
通过对象来绑定v-bind:class=“{'css类名':控制是否显示(true or false)}”
1.1我的对象更改&&绑定test
如果display为true,那么此时该部分的class就是 class="mycolor colordisplay",
通过设置display的值就可以控制colordisplay的显示
如果要设置绑定多个class的话就和正常的对象键值对一样中间用逗号隔开就可以了v-bind:class="{'colordisplay':display,'ispay':pay}"
1.2:内联样式:
v-bind:style='mycolor'
template
1.2我的样式内联更改&&绑定test
data
mypagestyle:{color: 'yellow',background:"blue"},
1.3:数组语法:
也可以通过数组来绑定v-bind:style='[mycolor1,mycolor2]'
1.3我的数组更改&&绑定test
然后设置返回的数据为
myarr:{color: 'white'}, myarrtest:{background:'#000',display:'inline'},
2.计算属性
也可以通过计算属性计算(适用于较为复杂判断)样式
2.计算属性判断
将计算属性的返回值作为类名,通过判断serd和slid的值来控制样式的显示与否
data() { return {serd:true,slid:true} }, computed: { compuretu: function() { return {compuretu: this.serd && this.slid} } }
设置样式
.compuretu{color:white;background: red}
3.操作节点
由于vue本身是虚拟dom如果通过document来进行节点样式更改的时候有可能会出现'style' is not definde的错误,
这个问题的解决方式就必须得对vue 的理解要求更高一层了,它可以通过在vue本身的周期mounted函数里用ref和$refs 来获取样式,来完成对其样式的更改:示例如下:
我的test
当然最后这种方式对于初入门的朋友来讲可能会有点理解不透,所以我更建议大家使用前几种方式
总结
以上所述是小编给大家介绍的Vue.js中对css的操作(修改)具体方式详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持!