序文
クラス名を動的に追加すると、変数が要件に一致すると、特定のクラス名に自動的に切り替わり、対応する効果が得られます。このプロセスは私たちがよく動的クラスと呼んでいるものですが、今日はフロントエンドの動的クラスについてお話します。
1. オブジェクト構文
1.1 単一クラスのバインド
次の場合のように、オブジェクトを動的に switch に
v-bind:class
渡すことができます。class
<template>
<div>
<el-button @click="clickOn" v-bind:class="{
'active':isActive}">点击我</el-button>
</div>
</template>
<script>
export default {
data() {
return {
isActive: true,
};
},
methods: {
clickOn() {
this.isActive = !this.isActive;
},
},
};
</script>
<style scoped>
.active {
color: red;
}
</style>
効果を達成する
1.2 複数のクラスのバインド
次の場合のように、1 つのオブジェクトに複数の属性を含めることもできます。属性は動的に切り替えて共存させることができます
class
。:class
class
<template>
<div>
<div class="activeOne" v-bind:class="{ activeTwo: isActive, 'activeThree': hasError }"></div>
</div>
</template>
<script>
export default {
data() {
return {
isActive: true,
hasError: true,
};
},
};
</script>
レンダリング結果
1.3 計算されたプロパティのバインディング
:class
の式が長すぎる場合やロジックが複雑な場合は、計算されたプロパティをバインドできます。通常、条件が 3 つ以上ある場合に使用できます。data
またはcomputed
、次の場合:
<template>
<div>
<div :class="taxonOne">内容内容内容</div>
</div>
</template>
<script>
export default {
data() {
return {
isActive: true,
isError: null,
error: {
type: "fail",
},
};
},
computed: {
taxonOne() {
return {
taxonTwo: this.isActive && this.error == null, // (isActive 为 true 且 error 为 null) 类名为 taxonTwo
taxonTherr: this.error && this.error.type == "fail", // (error 不为空且 error 中的 type 值为 "fail") 类名为 taxonTherr
};
},
},
};
</script>
<style scoped>
.taxonTwo {
color: red;
}
.taxonTherr {
color: blue;
}
</style>
レンダリング結果
2. 配列構文
2.1 クラス一覧
複数の を適用する必要が
class
ある場合は、:class
次のように、配列構文を使用して配列を にバインドできます。
<template>
<div>
<div v-bind:class="['taxonOne', 'taxonTwo']">内容内容内容</div>
</div>
</template>
<style scoped>
.taxonOne {
color: red;
}
.taxonTwo {
border: 1px solid blue;
}
</style>
レンダリング結果
2.2 三項演算子
class
次の場合のように、三項式を使用して条件に応じて切り替えます。
<template>
<div>
<div v-bind:class="[isActive ? 'taxonOne' : 'taxonTwo']">内容内容内容</div>
</div>
</template>
<script>
export default {
data() {
return {
isActive: false,
};
},
};
</script>
<style scoped>
.taxonOne {
color: red;
}
.taxonTwo {
color: blue;
}
</style>
isActive
のtrue
ときのレンダリング結果
逆に、
isActive
のfalse
レンダリング結果が
2.3 配列構文 + オブジェクト構文
class
複数の条件がある場合、このように書くと面倒なので、次のように配列構文でオブジェクト構文を使用できます。
<template>
<div>
<div v-bind:class="[{ taxonOne: isActive }, 'taxonTwo']">内容内容内容</div>
</div>
</template>
<script>
export default {
data() {
return {
isActive: true,
};
},
};
</script>
<style scoped>
.taxonOne {
border: 1px solid red;
}
.taxonTwo {
color: blue;
}
</style>
レンダリング結果
3.複合形態
次の場合のように、組み合わせて使用
v-if/v-else-if
できます。:class
<template>
<div>
<div v-if="state == '0'" class="taxonOne">内容内容内容</div>
<div v-else-if="state == '1'" class="taxonTwo">内容内容内容</div>
</div>
</template>
<script>
export default {
data() {
return {
state: "0",
};
},
};
</script>
<style scoped>
.taxonOne {
color: red;
}
.taxonTwo {
color: blue;
}
</style>
が
state
の0
、結果をレンダリングします
が
state
の1
、結果をレンダリングします
:スタイル
上記のダイナミクスに加えてclass
、直接および動的にバインドすることもできますstyle
.タグでインラインスタイルをバインドする方法を見てみましょう.
知らせ:
-
を含むすべての属性名は、style
キャメル ケースに変更する必要があります。たとえばfont-size
、fontSize
;に変更します。- バインド値に加えて、他のプロパティ名の値は、 not
fontSize:'14px'
のようにfontSize:14px
。
1. オブジェクトの形
1.1 直接結合
これは、次の場合のように、最も単純な形式である直接バインディングでもあります。
<template>
<div>
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }">内容内容内容</div>
</div>
</template>
<script>
export default {
data() {
return {
activeColor: "red",
fontSize: 30,
};
},
};
</script>
レンダリング結果
1.2 三項演算子
三項演算子
style
は主に、次の場合のように、変数が動的に変化するときに異なる変数を切り替えるのに便利です。
<template>
<div>
<div :style="{ color: state == '0' ? 'red' : 'blue'}">内容内容内容</div>
<div :style="state == '1' ? 'color:red' : 'color:blue'">内容内容内容</div>
</div>
</template>
<script>
export default {
data() {
return {
state: "0",
};
},
};
</script>
レンダリング結果
1.3 計算された特性
ロジックがより複雑な場合は、次の場合のように、計算されたプロパティをバインドできます。
<template>
<div>
<div :style="styleState(0)">内容内容内容</div>
</div>
</template>
<script>
export default {
data() {
return {
};
},
computed: {
styleState() {
return function (index) {
return index == 0 ? "color: red" : "color: blue";
};
},
},
};
</script>
レンダリング結果
2.配列形式
2.1 直接結合
<template>
<div>
<div :style="[styleOne, styleTwo]">内容内容内容</div>
</div>
</template>
<script>
export default {
data() {
return {
styleOne: {
border:"1px solid blue"
},
styleTwo: {
color: "red",
},
};
},
};
</script>
レンダリング結果
2.2 三項演算子
<template>
<div>
<div :style="[{color:(state == '0' ? 'red' : 'blue')}]">内容内容内容</div>
</div>
</template>
<script>
export default {
data() {
return {
state: "0",
};
},
};
</script>
レンダリング結果
3. 呼び出し方法
同様に、次の場合のように、メソッドを呼び出すことも選択できます。
<template>
<div>
<div :style="setStyle(0)">内容内容内容</div>
</div>
</template>
<script>
export default {
data() {
return {
};
},
methods: {
setStyle(index) {
return index == 0 ? "color: red" : "color: blue";
},
},
};
</script>
レンダリング結果
拡大
上に示したものはvue
でが、他のプラットフォームで使用するにはどうすればよいですか? 実際、それらは似ており、文法に少し違いがあるかもしれません.uniapp
とclass
.
uniapp の動的クラス
:class="[{'类名':条件},{'类名':条件},{'类名':条件}]"
<template>
<view>
<view :class="[{
'taxonOne' : index == '0'},{
'taxonTwo' : index == '1'}]">内容内容内容</view>
</view>
</template>
<script>
export default {
data() {
return {
index: "0"
}
},
}
</script>
<style scoped>
.taxonOne {
color: red;
}
.taxonTwo {
color: blue;
}
</style>
が
index
の0
、結果をレンダリングします
が
index
の1
、結果をレンダリングします
WeChat アプレットの動的クラス
index.wxml
<view class="{
{ state == '0' ? 'taxonOne' : 'taxonTwo' }}">内容内容内容</view>
index.js
Page({
data: {
state: '1'
},
})
index.wxss
.taxonOne{
color: red;
}
.taxonTwo{
color: blue;
}
が
state
の0
、結果をレンダリングします
が
state
の1
、結果をレンダリングします