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} : {}
}