0%

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

vue.js

v-bind 縮寫為 :

用法:

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

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