}
},
methods:{
csh: function() {
_lorBG='yellow' ; //在需要的地⽅改变量值
}
}
第⼆种
//--background为样式变量名，动态数据colorBG赋值给--background
<view class="view-body sy_s" :>
</view>
data(){
return {
colorBG:'red', //定义变量，变量⼀定是字符串的形式，在需要的地⽅改变量值
}
},
<style>
.sy_s {
background:var(--background); //在节点class名样式中调⽤--background变量
}
</style>
第三种：伪元素conent属性可以显⽰⽂字，所以要⽤:data-attr指向绑定
<view class="ceshi" :data-attr="content">
</view>
data(){
return {
content:'⽂字', //定义变量，变量⼀定是字符串的形式，在需要的地⽅改变量值
}
},
<style>
//样式名ceshi的伪类元素样式
.ceshi::after{
content: attr(data-attr); //content属性显⽰⽂字，attr指向data-attr所绑定的动态数据
color:#fff;
background:red;
position:absolute;
top:0px;
border-radius:50% 50%;
width:20px;
heiht:20px;
right:0px;
}
</style>
补充⼀种写法，在css定义变量，⽤var使⽤，但是伪元素的content属性不能⽤并且⼩程序不⽀持ref写法
<view class="ceshi" ref="test">
</view>
<script>
data() {
return {
color:yellow
}
},
onShow: function() {
//$nextTick等页⾯完全渲染才执⾏
this.$nextTick(_ => {
this.$st.$el.style.setProperty("--color",lor);//给css中的变量重新赋值 })
}
</script>
<style>
.ceshi::after{
css变量/* 定义变量 */
--color:red;
background:var(--color);
//此时先定义了变量为red，background使⽤var调⽤颜⾊，变为data中颜⾊
}
</style>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
豫公网安备41160202000602
发表评论