82 lines
2.0 KiB
Vue
82 lines
2.0 KiB
Vue
|
<template>
|
|||
|
|
<fieldset>
|
|||
|
|
<legend>class绑定应用场景-变量、对象和数组</legend>
|
|||
|
|
<p v-bind:class="myClass">普通变量：Vue.js是渐进式前端框架。</p>
|
|||
|
|
<button type="button" @click="myClass = 'class1'">修改样式</button>
|
|||
|
|
<p :class="classObject">对象：Vue单页应用开发简单。</p>
|
|||
|
|
<div v-bind:class="{ active: isActive }">
|
|||
|
|
对象：是一种常用的数据类型。
|
|||
|
|
</div>
|
|||
|
|
<div v-bind:class="[classA, classB]">
|
|||
|
|
数组：在工程项目中使用非常广泛。
|
|||
|
|
</div>
|
|||
|
|
<div class="static" v-bind:class="{ active: isActive, redText: hasError }">
|
|||
|
|
v-bind:class指令与普通的class属性共存。
|
|||
|
|
</div>
|
|||
|
|
</fieldset>
|
|||
|
|
<fieldset>
|
|||
|
|
<legend>style绑定应用场景-对象和数组</legend>
|
|||
|
|
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">
|
|||
|
|
绑定style
|
|||
|
|
</div>
|
|||
|
|
<div :style="styleObject">style对象</div>
|
|||
|
|
<div v-bind:style="[styleObjectA, styleObjectB]">style数组</div>
|
|||
|
|
</fieldset>
|
|||
|
|
</template>
|
|||
|
|
<script setup lang='ts'>
|
|||
|
|
import { reactive, ref } from 'vue';
|
|||
|
|
const myClass = ref("red")
|
|||
|
|
const classObject = ref({
|
|||
|
|
class1: true,
|
|||
|
|
class2: true,
|
|||
|
|
})
|
|||
|
|
const classA = ref("class1")
|
|||
|
|
const classB = ref("class2")
|
|||
|
|
const isActive = ref(true)
|
|||
|
|
const hasError = ref(true)
|
|||
|
|
const activeColor = ref("#99DD33")
|
|||
|
|
const fontSize = ref(36)
|
|||
|
|
const styleObject = ref({
|
|||
|
|
border: "2px" + " solid" + "#99AA33",
|
|||
|
|
fontSize: 28 + "px",
|
|||
|
|
})
|
|||
|
|
const styleObjectA = ref({
|
|||
|
|
color: "blue",
|
|||
|
|
fontSize: 32 + "px",
|
|||
|
|
})
|
|||
|
|
const styleObjectB = ref({
|
|||
|
|
background: "#EFEFDF",
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
<style scoped>
|
|||
|
|
.red {
|
|||
|
|
color: red;
|
|||
|
|
font-size: 24px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.class1 {
|
|||
|
|
color: green;
|
|||
|
|
font-size: 32px;
|
|||
|
|
font-weight: bolder;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.class2 {
|
|||
|
|
border: 1px dashed #0033cc;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.active {
|
|||
|
|
color: blue;
|
|||
|
|
text-decoration: underline;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.static {
|
|||
|
|
color: #667788;
|
|||
|
|
font-size: 22px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.redText {
|
|||
|
|
color: red;
|
|||
|
|
background: #ededed;
|
|||
|
|
}
|
|||
|
|
</style>
|