v-bind動態綁定

v-bind動態綁定

v-bind的基本用法

	<img v-bind:src="vHref" alt="">

動態綁定class（對象語法）

用法一

• class以對象的形式綁定，當類名為true的時候class存在，為false時不存在

• 和普通的類同時存在，並不沖突，普通類可以作為必備class存在

  v-bind:class="{類名1:布爾值,類名2:布爾值}"

	<div id='app'>
		<h2 class="default" v-bind:class="{active:isActive,line:isLine}">{{message}}</h2>
	</div>
		
	<script>
    const app = new Vue({
      el:'#app',
      data:{
        message:'HelloVue',
        isActive:true,
        isLine:true
      }
    })
  </script>

用法二

• 如果過於復雜，可以通過methods方法來定義class
• 注意這里的調用方法要加括號()

	<div id='app'>
		<h2 class="default" v-bind:class="getClass()">{{message}}</h2>
	</div>
	
	<script>
    const app = new Vue({
      el:'#app',
      data:{
        message:'HelloVue',
        isActive:true,
        isLine:true
      },
      methods:{
        getClass:function () {
          return {active:this.isActive,line:this.isLine}
        }
      }
    })
  </script>

動態綁定class（數組語法）

（這種用法比較少，一般用對象語法）

• 以數組的形式動態綁定class
• 和對象語法類似，也可以添加普通類

用法一

• 直接通過vue的data數據傳遞

	<h2 class="default" :class="[active,line]">{{message}}</h2>

用法二

• 通過methods返回class，把上面的數組拿到methods中return回去

	<div id='app'>
		<h2 class="default" :class="getClass()">{{message}}</h2>
	</div>
	
	<script>
    const app = new Vue({
      el:'#app',
      data:{
        message:'HelloVue',
        active:'classA',
        line:'classB'
      },
      methods:{
        getClass:function () {
          return [this.active,this.line];
        }
      }
    })
  </script>

動態綁定style（對象語法）

用法一

• style用法相當於內聯樣式

• 屬性名可以加 - 或者用駝峰命名法命名屬性

• 例如font-size || fontSize

  {{message}}

	<!-- 屬性名寫死的話要加引號 -->
	<h2 :style="{fontSize:'30px'}">{{message}}</h2>
    <h2 :style="{fontSize:finalNum+'px',backgroundColor:dataColor}">{{message}}</h2>

用法二

• 用methods方法返回stlye

	<div>
		 <h2 :style="getStyles()">{{message}}</h2>
	</div>
	
	 <script>
		const app = new Vue({
		  el:'#app',
		  data:{
			message:'HelloVue',
			final:'50px',
			finalNum:50,
			dataColor:'red',
		  },
		  methods:{
			getStyles:function () {
			  return {fontSize:this.finalNum+'px',backgroundColor:this.dataColor}
			}
		  }
		})
	</script>

動態綁定style（組數語法）

方法

（這種用法比較少，一般用對象語法）

• 用數組的方式動態綁定style

  <div id="app">
    <h2 :style="[baseStyle,baseStyle1]">{{message}}</h2>
  </div>

  <script>
    const app = new Vue({
      el:'#app',
      data:{
        message:'HelloVue',
        baseStyle:{fontSize:'50px'},
        baseStyle1:{backgroundColor:'red'},
      }
    })
  </script>

v-bind中的駝峰標識

• 動態綁定屬性時盡量字母小寫，因為v-bind不支持大寫字母。

• 如果v-bind使用駝峰需要轉義，大寫字母轉小寫，並前面加個 - ，其他地方正常使用駝峰即可

• 但仍不建議中間加-，有可能出現不可預期的錯誤，最好小寫字母

    //這里以props為例
    <cpn :new-message='message'></cpn>  
    <template>
    	<div>{{newMessage}}</div>
    </template>
  

動態綁定style高級技巧

動態綁定style不能像綁定class一樣做布爾判定，我們可以用三元運算符來動態顯示style

//isActive為布爾值，activeColor為屬性
activeStyle(){
	return this.isActive ? {color:this.activeColor} : {}
}