方法1:
项目中由于卡片背景颜色是变化的,为了美观要使卡片上文字颜色也会变;需要通过接口获取颜色值
本质上和普通添加style方式是一样的
<div class="number" :style="{ color: color }">
{{ $route.query.card_id ? $route.query.card_id : "" }}
</div>
export default {
data() {
return {
color: ""
};
},
methods: {
//方法里面请求接口部分我就不写了,下面是给颜色赋值
this.color = obj.data.color_no_v;
};
-------------------------------------------------2020.2-26----------------------------------------------
方法2:
今天尝试在前端通过js来更改样式,因为我做的这页是一个卡片详情页,所以url里面会有一个id,我们通过获取到这个id对他进行判断来更改颜色。
使用ref,给相应的元素加ref=“number” 然后再this.$refs.number获取到该元素
注意:在获取相应元素之前,必须在mounted钩子进行挂载,否则获取到的值为空
-------------------------------------------------2020.3-19----------------------------------------------
今天看vue.js文档看到说直接绑定到一个样式对象通常更好,这会让模板更清晰:
html
<div :style="styleObject"></div>
js
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
以后有其他设置元素style 颜色样式的方法也会继续在这里总结更新