iT邦幫忙

0

Vue ⑅:v-bind 動態綁定 HTML 屬性

如標題 (⑅•ᴗ•⑅)
v-bind 可以動態綁 HTML 屬性、將資料傳遞到元素上。
 

幾個重點 ( 官方文件參照 )

  • v-bind 可以直接縮寫成 「:」
  • 他可以傳入我們放在 data內的資料到 HTML
  • 可以使用各種 JS 的表達式 。
     

來透過範例, 看看他可以幹嘛吧 ♪

⑅ 放圖片

<div id="app">
	<img v-bind:src="imgUrl">

<!-- ♡。可以縮寫,把 v-bind 省略掉 -->
	<img :src="imgUrl">
</div>
const vm = new Vue({
	el: '#app',
	data: {
		imgUrl: '圖片網址'
	}
})

摳Pen長這樣 :
https://ithelp.ithome.com.tw/upload/images/20201121/201295068tRXM8JJzj.png
 
 

⑅ 眼尖ㄉ各位或許看到 上面寫了 :value

一開始有提到v-bind 可以傳表達式結果,
什麼是表達式? 像我們平常運算也可以算是一種表達式

範例:

<div id="app">
  <input type="text" :value="text">
  <input type="text" :value="(1+1)*100">
</div>
const vm = new Vue({
  el: '#app',
  data: {
    text: '喵嗚',
  }
})

 
 

⑅ v-bind 很常用 之 動態調整class

v-bind 還有個功能,它可以用判斷式 達到切換class 效果 。
直接範例會比較好懂 ♫

題目:按按鈕之後,我的 box 會變顏色 ( 新增class 的方式 )。

製作步驟:

  1. ( CSS ) 先寫好你要變色的 class 樣式。
  2. ( JS ) vue 物件中的data 建立一個値為 false 的資料。
  3. ( HTML ) 到按鈕處,綁上 v-on 。當我按按鈕,資料的 false 會變成 true 。
  4. ( HTML ) 到 box 處,用 v-bind 綁上class 樣式,寫法可能要硬記一下。
    :class = "{ '你要新增的class' : data定義的資料 }"
     
<div id="app">
	<div class="box" :class="{ 'momo' : isMomo }"></div>
	<input type="button" value="カラーチェンジ" @click='isMomo = !isMomo'>
</div>

<!--★ CSS ★-->
<style>
	.momo {
		background-color: #fa6f98;
		border: 1px solid #fa6f98 ;
	}
</style>

<!--★ JS ★-->
<script>
	const vm = new Vue({
		el:'#app',
		data: {
			isMomo: false
		}
	})
</script>

★ Codepen 附上 ゜・*

 
 
以上是 v-bind 的簡單介紹 。。


尚未有邦友留言

立即登入留言