uni-app styleスタイルと三元演算子の使い方を学ぶ(三)
3466 ワード
三元演算子の使用
isRed="1"がtrueの場合viewにclass=redを追加isRed="1"がfalseの場合viewにclass=greenを追加
ダイナミックスタイル
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>