vue (4) 模板與樣式綁定

發表於 更新於 分類於
使用指令綁定資料與畫面

v-text

vue 除了使用 {{ }} 作為模板外，也可以使用指令處理模板

以下寫法相同:

1
2
<p>{{ text }}</p>
<p v-text="text"></p>

不同的是如果在 p 標籤內加入文字，v-text 指令渲染的會無視標籤內原本內容，而 {{ }} 則會顯示 hello world

1
2
<p>{{ text }} world</p> // hello world
<p v-text="text">world</p> // hello

v-html

v-html 可以用來插入 html 結構

1
2
3
4
5
6
7
8
9
10
11
12
13
<p v-html="text">123</p>
<script>
  // vue3 寫法
  const { createApp } = Vue;
  const vm = createApp({
    data() {
      return {
        text: '<h1>我是標題</h1>'
      }
    },
  });
  vm.mount('#app');
</script>

樣式綁定

利用v-bind 動態綁定class樣式， 縮寫為 :class=""


利用物件的形式，可以傳入多筆class名稱，當值為true時，就會加入該class。class 加上單引號時 class 是字串，會去讀取已經定義好的 CSS 樣式，沒有加上單引號則會去取得在 Vue 定義的 data 資料。

傳入整包物件



點擊時，切換rotate的true或false

使用陣列操作



可以在input元素上綁定陣列，當為true時， value的裡的className會被加入陣列。

綁定行內樣式

本次章節介紹的 :style 這種方法，通常是要做某些需要判斷的效果時，

比如:某些商品標題需要使用到不同顏色時，就會使用 :style 這個語法，讓商品標題，顯示的艷色和原本設定不同。