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

Class 与 Style 绑定

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

绑定 HTML Class

<!-- 对象语法  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>

绑定内联样式

<!-- 对象语法  -->
<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>

 条件渲染和列表渲染

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

事件处理

<!-- 使用 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>