序文
クラス名を動的に追加すると、変数が要件に一致すると、特定のクラス名に自動的に切り替わり、対応する効果が得られます。このプロセスは私たちがよく動的クラスと呼んでいるものですが、今日はフロントエンドの動的クラスについてお話します。
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。:classclass
<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、結果をレンダリングします
