v-bind 綁定語法

2019鐵人賽 vue.js

Andy Tsai

團隊好想工作室第二屆鐵人賽

2018-10-20 20:36:57

2810 瀏覽

菜菜菜的 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>