iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 5
0

菜菜菜的 Vue 30天 - Day5

好的前一章講完了 data 方法及 {{}} 語法能夠讓 data 在 html 上渲染出來。

接下就來講講綁定語法,那什麼是綁定語法呢?!

一般來說我們在 html tag 上的屬性或值都是靜態的,例如:

<img src="http://xxxxxx.xxxx.xxx.png" alt="image">

or

<a href="http://xxxxxx.xxxx.xxx"></a>

or

<div class="xxxxx"></div>

透過綁定語法我們就能將屬性的值變成是動態的資料,而不是寫死的,使用上更靈活。

綁定語法有 2 種,一個是單向綁定、另一個是雙向綁定。

接下來就來介紹一下這 2 種綁定語法。

v-bind:

v-bind: 是單向綁定的語法,他能夠將 data 裡屬性的值動態綁定到 html tag 上。

下面就以實際的 code 來講解。

我們在 #app 裡面放了一個 img tag 並在 data 裡寫了一個 img 值為皮卡丘1。

接下來將 data 裡的 img 透過 v-bind 綁定到 img tag 上。

<body>
	<div id="app">
	  <img v-bind:src=`./${img}.jpg` alt="img">
	</div>
</body>
<script>
	const vm = new Vue({
	  el: '#app',
	  data: {
	    img: '皮卡丘1'
	  }
	})
</script>	

v-bind: 也能夠縮寫成 : ,沒錯就是一個冒號。

所以上面的 img tag 也能夠寫成以下這樣:

<img :src=`./${img}.jpg` alt="img">

結果會是這樣:

除了綁定 src 以外我們也常使用在綁定 class,例如:

<body>
	<div id="app">
	  <div class="block"></div>
	</div>
</body>	
<style>
	.block{
		width: 200px;
		height: 200px;
		border: 5px solid;
		border-color: blue;
	}
</style>

我們寫了一個藍色的框。

然後我想把框的顏色改成紅色,綁定一個 class redBorder 到 .block 上,並在 data 裡面寫一個 showRed: true

<body>
	<div id="app">
	  <div class="block" :class="{redBorder: showRed}"></div>
	</div>
</body>
<script>
	const vm = new Vue({
	  el: '#app',
	  data: {
			showRed: true
	  }
	})
</script>	
<style>
	.block{
		width: 200px;
		height: 200px;
		border: 5px solid;
		border-color: blue;
	}

	.redBorder{
		border-color: red;
	}
</style>

:class 裡面是一個 object 的格式

key 的部分放入的是 class , value 的部分是一個布林值,如果為 true 的時候就會將該 class 加到元素上,如果為 false 的時候就不會加上去。

v-model 就在下一章介紹囉~


上一篇
Data & 模板語法
下一篇
v-model
系列文
菜菜菜的 Vue 30天30

1 則留言

0
Chris
iT邦新手 5 級 ‧ 2018-10-20 22:14:58

tags 的用法似乎不是 IT邦的用法/images/emoticon/emoticon15.gif

哎呀呀,這就來將它拿掉~/images/emoticon/emoticon16.gif

我要留言

立即登入留言