账户中心 退出系统
普通版本 weex版本

graceUI - weex 教程 - 动态样式及style

动态样式

<template>
	<div>
		<text class="text" :class="[isRed ? 'red' : '']" @click="isRed = !isRed">hi</text>
	</div>
</template>
<script>
export default {
	data() {
		return {
			isRed : false
		}
	},
	created : function(){

	},
	methods: {}
}
</script>
<style>
.text{width:750px; height:200px; background-color: #007AFF; margin:10px 0; font-size:50px; text-align:center; line-height:200px; color:#FFFFFF;}
.red{background-color:#FF0066;}
</style>


动态 style 属性

<template>
	<div>
		<text class="text" :style="{'background-color':isRed ? 'red' : '#007AFF', 'font-size':isRed ? '80px' : '50px'}" @click="isRed = !isRed">hi</text>
	</div>
</template>
<script>
export default {
	data() {
		return {
			isRed : false
		}
	},
	created : function(){

	},
	methods: {}
}
</script>
<style>
.text{width:750px; height:200px; background-color: #007AFF; margin:10px 0; font-size:50px; text-align:center; line-height:200px; color:#FFFFFF;}
.red{background-color:#FF0066;}
</style>