提姆寫程式

0%

Vue 筆記 - 使用 v-bind 動態新增屬性

發表於 更新於 分類於 Disqus：
透過動態加入 class 使網頁彈性更大

vue.js

v-bind 縮寫為 :

用法：

動態地綁定一個或多個特性，或一個組件 prop 到表達式。
在綁定 class 或 style 特性時，支持其它類型的值，如數組或對象。可以通過下面的教程鏈接查看詳情。

Mustache 不可作為屬性使用，如果要在 HTML 標記內的屬性帶入 data 或運算後的內容，要用 v-bind 來進行綁定。

一般 html 程式碼是下方這樣

1
2
3
4
5
6
7
8
<div id="app">
  <a href="https://cn.vuejs.org/">請點選連結</a>
  <br />
  <img
    src="https://images.unsplash.com/photo-1523049673857-eb18f1d7b578?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1268&q=80"
    alt="fruit"
  />
</div>

加入 vue 後的程式碼：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="app">
  <a :href="link">請點選連結</a>
  <br />
  <img :src="imgUrl" alt="fruit" />
</div>

<script>
  var vm = new Vue({
    el: "#app",
    data: {
      link: "https://cn.vuejs.org/",
      imgUrl:
        "https://images.unsplash.com/photo-1523049673857-eb18f1d7b578?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1268&q=80",
    },
  });
</script>

Codepen: https://codepen.io/tim_hsu/pen/ExVYbNg

動態加上 className

來個綜合練習，有一個 box，透過 v-bind 動態加上 class，點擊 button 後旋轉 box，並且會變成粉紅色。

HTML

1
2
3
4
5
6
7
8
<div id="app">
  <div class="container">
    <div class="box rotate"></div>
    //這時正方形是 45 度
    <hr />
    <button class="btn">button</button>
  </div>
</div>

SCSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.container {
  width: 500px;
  margin: 0 auto;
  .box {
    width: 100px;
    height: 100px;
    margin-top: 50px;
    transition: transform 0.5s;
    border: 1px solid #000;
    transition: all 0.5s ease; //旋轉顏色漸變效果
    &.rotate {
      transform: rotate(45deg); //旋轉45 度
      background-color: pink; //旋轉後變粉紅色
      border: 5px solid red; //旋轉後外框變粗變色
      border-radius: 20px; //旋轉有圓角效果
    }
  }
  hr {
    margin: 50px 0 10px 0;
  }
}

vue

1
2
3
4
5
6
var vm = new Vue({
  el: "#app",
  data: {
    isTransform: false, //預設不旋轉
  },
});

這時透過 v-bind 動態加上 class，語法是 <div class="box" :class="{'要加入的 className':判斷式}"></div>

所以完成後的程式碼變為:

HTML

1
2
3
4
5
6
7
<div id="app">
  <div class="container">
    <div class="box" :class="{'rotate':isTransform}"></div>
    <hr />
    <button class="btn">button</button>
  </div>
</div>

透過 vue 開發工具會看到 isTransform: false;，改成 true 就會看到 box 會旋轉，代表效果有吃到。

有 button 就會有 click 事件，所以在 button 中加上 @click="rotatebox"，程式碼如下:
<button class="btn" @click="rotatebox">button</button>

並且在 data 裡面加入 methods，

1
2
3
4
5
methods: {
  rotatebox(){
   this.isTransform = !this.isTransform
  }
 },

CodePen: https://codepen.io/hnzxewqw/pen/dyYXexX