V22_直覺式理解_Vue_Directives(2)_v-on

15th鐵人賽 vue.js

jasonlee2357

2023-10-06 23:16:23

170 瀏覽

分享至

V22_直覺式理解_Vue_Directives(2)_v-on

今天來再探究 v-on
參考一下W3School_Vue在v-on的說明
Vue v-on Directive
https://www.w3schools.com/vue/ref_v-on.php

先來看一下範例

<body>

<div id="app">
  <h1>v-on Example</h1>
  <div v-bind:class="{ yelClass: bgColor }">
    <p>Click the button to change background color of this DIV box.</p>
    <button v-on:click="bgColor = !bgColor">Click</button>
    <p>bgColor property: "{{ bgColor }}"</p>
  </div>
</div>

<script>
  const app = Vue.createApp({
    data() {
      return {
        bgColor: true,
        cls: "yelClass"
      };
    }
  }) 
  app.mount('#app')

</script>

<style scoped>
  .yelClass {
    background-color: rgb(255, 255, 136);
  }
  div {
    margin: 10px;
    padding: 10px;
    border: dashed black 1px;
    width: 250px;
  }
</style>  

</body>

<div v-bind:class="{ yelClass: bgColor }"> 綁定 class，
樣式是 yelClass，變數是 bgColor 初值是 true

簡約寫法是 <div :class="{ yelClass: bgColor }">
渲染後變成 <div class="yelClass">

因為看到這種寫法 :class="{ yelClass: bgColor }"
跟以往看到的不太一樣，就來測試一下

這些還有幾種測試

<div id="x1" :class="{ yelClass: bgColor }">
這是原本的設定 bgColor 是 true 或 false 設定是否要讓 yelClass 產生作用

<div id="x1" :class="cls">
這是綁定class，變數是 cls，數值是 yelClass

<div id="x1" :class="cls">
這是綁定class，變數是 cls，數值是 cls: { yelClass: false }，取消 yelClass的作用
數值若是 cls: { yelClass: true }，啟用 yelClass的作用

<div id="x1" class="yelClass">
這是一般沒有綁定時的寫法

接下來是
<button v-on:click="bgColor = !bgColor">Click</button>

簡約寫法是 <button @click="bgColor = !bgColor">Click</button>

當button click時 bgColor會做true及false的切換

除了 @click 的寫法