vue里css、伪元素使用data数据

第一种

//如果要在动态样式后面接着写样式，要用逗号隔开
<view class="view-body " :style="{background:colorBG,height: '40rpx'}">
</view>
data(){
	return {
		colorBG:'red',   //定义变量，v-bind绑定,变量一定是字符串的形式
	}
},
methods:{
	csh: function() {
				_this.colorBG='yellow' ;  //在需要的地方改变量值
	}
}

第二种

//--background为样式变量名，动态数据colorBG赋值给--background
<view class="view-body sy_s" :style="{'--background':colorBG}">
</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.$refs.test.$el.style.setProperty("--color",this.color);//给css中的变量重新赋值
			})
	}    
</script>

<style>
.ceshi::after{
		/* 定义变量 */
		--color:red;
		background:var(--color);
		//此时先定义了变量为red，background使用var调用颜色，变为data中颜色
	}
</style>