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> |