uni-app styleスタイルと三元演算子の使い方を学ぶ(三)

3466 ワード

三元演算子の使用
isRed="1"がtrueの場合viewにclass=redを追加isRed="1"がfalseの場合viewにclass=greenを追加
<view :class="[isRed=='1' ? 'red' : 'green']"> </view>

ダイナミックスタイル
<view :style="{fontSize: fontSize+'px'}">style</view>
var $this = '';
data() {
	return {
		isRed:'1'
	}
},
onLoad() { 
	$this = this;
	setInterval(function(){ 
		// console.log($this.age); 
		$this.age++;
		$this.fontSize++;
	},2000)
	// console.log('index ')
},
<style>
	.red{
		color:red;
		fontSize : '10'
	}
	.green{
		color:green;
	}
</stlye>