最近在做小项目,涉及到了样式的动态变化,所有就想到了v-bind:class这个指令,但是按照原本的方式:
<div :class="func(state)">
这样写;在开发环境下生效,但是打包发布之后就不生效了。
经过尝试找出了原因:
1、:class 指令支持接收字符串'example'这种形式;
2、也接受:class="v1";v1为data里的组件变量;可在任意触发事件中修改v1的值;
3、用方法1扩展一下,将class字符串作为事件返回值。但是这个方法存在一个小问题,返回的值是一个字符串。请注意,返回的是一个字符串。
1和2方法的不同点在于:1方法的事件是标签本身出发的,2方法是其他事件触发的。
方法3就是实现标签的自发触发事件来修改class样式类。
下面给一个正确使用方法示例:
<template>
<button :class=change_class(state)><button/>
<template/>
<script>
export default {
data:{
return{
state: "class1",
}
}
methods: { change_class(state){ if(state===0){ return "class1"; } else{ return "class2" } } }
}
<script/>
<style scope>
.class1{ /*background-color: rgba(140,216,224,0.5);*/ color: #1ACBDC; font-size: 15px; } .class2{ background-color: rgba(53,157,198,0.7); color: #ffffff; font-size: 15px; }
<style/>