笔记：3.12课程笔记上传

3.12/Vue3Proj/vue-project/src/Com_6.vue

@@ -0,0 +1,82 @@
+<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>