vue3嵌入到html中使用 基础（三）

Class 与 Style 绑定

在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

绑定 HTML Class

?

1 2 3 4 5 6 7 8 9 10

<!-- 对象语法  active 这个 class 存在与否将取决于 data property isActive是否为true --> <div :class="{ active: isActive }"></div> <div class="static" :class="{ active: isActive, 'text-danger': hasError }" ></div> <div :class="classObject"></div> <!-- 数组语法 --> <div :class="[activeClass, errorClass]"></div> <div :class="[isActive ? activeClass : '', errorClass]"></div> <div :class="[{ active: isActive }, errorClass]"></div> <!-- 在组件上使用 --> <my-component :class="{ active: isActive }"></my-component>

绑定内联样式

?

1 2 3 4 5 6 7

<!-- 对象语法  --> <div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div> <div :style="styleObject"></div> <!-- 数组语法 --> <div :style="[baseStyles, overridingStyles]"></div> <!-- 多重值 只会渲染数组中最后一个被浏览器支持的值--> <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

 条件渲染和列表渲染

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51

<!-- v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。 --> <h1 v-if="awesome">Vue is awesome!</h1> <h1 v-else>Oh no</h1> <template v-if="ok">   <h1>Title</h1>   <p>Paragraph 1</p>   <p>Paragraph 2</p> </template> <div v-if="type === 'A'">A</div> <div v-else-if="type === 'B'">B</div> <div v-else-if="type === 'C'">C</div> <div v-else>Not A/B/C</div> <!-- 带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 display 属性。 --> <h1 v-show="ok">Hello!</h1> <!-- 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，   如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。 -->   <!-- v-for 指令 数组--> <ul id="array-rendering">   <li v-for="item in items">{{ item.message }}</li> </ul> <ul id="array-with-index">   <li v-for="(item, index) in items">     {{ parentMessage }} - {{ index }} - {{ item.message }}   </li> </ul> <ul>   <template v-for="item in items" :key="item.msg">     <li>{{ item.msg }}</li>     <li class="divider" role="presentation"></li>   </template> </ul> <!-- v-for 指令 对象--> <ul id="v-for-object" class="demo">   <li v-for="value in myObject">{{ value }}</li> </ul> <li v-for="(value, name) in myObject">{{ name }}: {{ value }}</li> <li v-for="(value, name, index) in myObject">   {{ index }}. {{ name }}: {{ value }} </li> <!-- v-for 也可以接受整数。在这种情况下，它会把模板重复对应次数。 --> <div id="range" class="demo">   <span v-for="n in 10" :key="n">{{ n }} </span> </div> <!-- 不推荐在同一元素上使用 v-if 和 v-for  当它们处于同一节点，v-if 的优先级比 v-for 更高，这意味着 v-if 将没有权限访问 v-for 里的变量 --> <!-- 这将抛出一个错误，因为“todo” property 没有在实例上定义 --> <li v-for="todo in todos" v-if="!todo.isComplete">{{ todo.name }}</li> <!-- 推荐 --> <template v-for="todo in todos" :key="todo.name">   <li v-if="!todo.isComplete">{{ todo.name }}</li> </template>

事件处理

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72

<!-- 使用 v-on 指令 (通常缩写为 @ 符号) 来监听 DOM 事件 --> <div id="basic-event">   <button @click="counter += 1">Add 1</button>   <p>The button above has been clicked {{ counter }} times.</p> </div> <!-- 事件处理方法 --> <button @click="greet">Greet</button> <script>   Vue.createApp({     data() {       return {         name: "Vue.js",       };     },     methods: {       greet(event) {         // `methods` 内部的 `this` 指向当前活动实例         alert("Hello " + this.name + "!");         // `event` 是原生 DOM event         if (event) {           alert(event.target.tagName);         }       },     },   }).mount("#event-with-method"); </script> <!-- 内联处理器中的方法 --> <div id="inline-handler">   <button @click="say('hi')">Say hi</button>   <button @click="say('what')">Say what</button> </div> <script>   Vue.createApp({     methods: {       say(message) {         alert(message);       },     },   }).mount("#inline-handler"); </script> <!-- 原始的 DOM 事件 --> <button @click="warn('Form cannot be submitted yet.', $event)">Submit</button> <script>   Vue.createApp({     methods: {       warn(message, event) {         // 现在可以访问到原生事件         if (event) {           event.preventDefault();         }         alert(message);       },     },   }).mount("#inline-handler"); </script> <!-- 多事件处理器 --> <button @click="one($event), two($event)">Submit</button> <!-- 事件修饰符 --> <!-- 阻止单击事件继续冒泡 --> <a @click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form @submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 --> <a @click.stop.prevent="doThat"></a> <!-- 只有修饰符 --> <form @submit.prevent></form> <!-- 添加事件监听器时使用事件捕获模式 --> <!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 --> <div @click.capture="doThis">...</div> <!-- 只当在 event.target 是当前元素自身时触发处理函数 --> <!-- 即事件不是从内部元素触发的 --> <div @click.self="doThat">...</div>