Vue 與 指令

發表於 | 分類於 ，

Vue 常用指令

v-model 修飾符

1
2
3
4
5
6
7
8
9
<div id="app">
  <input type="text" v-model.number="number" >
  {{ number }}
  {{ typeof number }}
  <hr>
  <input type="text" v-model="number2">
  {{ number2 }}
  {{ typeof number2 }}
</div>
  • lazy：編輯完成後，會觸發更新資料（離開 focus 的時候）
  • number：限制只有數值型別的資料才能寫入
    v-model 預設是字串型別
  • trim：去除字串前後多於的空白

v-on：事件觸發器

最常用：prevent（去除預設事件）

v-bind

縮寫：：

v-for

key 唯一且必填

當 input 輸入內容後，按下反轉陣列時：

  • 如果沒有 key 時，則 input 位置不會被同時更動
  • 當有加上 key 時，input 位置會與原本的資料內容位置一起變動
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="app">
  <h4>缺少 key</h4>
  <ul>
    <li v-for="(item, key) in arrayData">
      {{ key }} - {{ item.name }} {{ item.age }} 歲 <input type="text" />
    </li>
  </ul>

  <h4>加上 key</h4>
  <ul>
    <li v-for="(item, key) in arrayData" :key="item.age">
      {{ key }} - {{ item.name }} {{ item.age }} 歲 <input type="text" />
    </li>
  </ul>
  <button class="btn btn-outline-primary" @click="reverseArray">
    反轉陣列
  </button>
</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
const app = {
  data() {
    return {
      arrayData: [
        {
          name: "Bryan",
          age: 35
        },
        {
          name: "Coco",
          age: 40
        },
        {
          name: "Den",
          age: 41
        }
      ]
    };
  },
  methods: {
    reverseArray: function() {
      this.arrayData.reverse();
      console.log(this.arrayData);
    }
  }
};

Vue.createApp(app).mount("#app");

v-class

範例一 按鈕樣式

1
2
3
4
5
6
7
8
<button
  type="button"
  class="btn btn-outline-primary"
  :class="{active: isActive}"
  @click="isActive = !isActive"
>
  Primary
</button>
1
2
3
4
5
6
7
8
9
10
const app = {
  data() {
    return {
      isActive: false
    };
  },
  methods: {}
};

Vue.createApp(app).mount("#app");

範例二 頁籤切換

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
<div id="app">
  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item" role="presentation">
      <button
        class="nav-link"
        :class="{active: isActive === 'Home'}"
        @click="isActive = 'Home'"
      >
        Home
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button
        class="nav-link"
        :class="{active: isActive === 'Profile'}"
        @click="isActive = 'Profile'"
      >
        Profile
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button
        class="nav-link"
        :class="{active: isActive === 'Casper'}"
        @click="isActive = 'Casper'"
      >
        Casper
      </button>
    </li>
  </ul>
  <div class="tab-content" id="myTabContent">
    <div class="tab-pane" :class="{active: isActive === 'Home'}">Home</div>
    <div class="tab-pane" :class="{active: isActive === 'Profile'}">
      Profile
    </div>
    <div class="tab-pane" :class="{active: isActive === 'Casper'}">
      Casper
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
const app = {
  data() {
    return {
      isActive: ""
    };
  },
  methods: {}
};

Vue.createApp(app).mount("#app");

雙向綁定

只讀出渲染
可讀可寫
利用事件觸發調整 data，再利用渲染方法渲染到畫面上