vue标签属性v-bind绑定class

责编:menVScode 2018-01-27 2:45 阅读(1063)

        vue中所有用 v-bind 指令绑定的属性,若data中数据发生改变了企业面上的值也会同步进行更新。

<a v-bind:href="link" :title="MVC"> to menvscode </a>

        假如不是通过v-bind绑定的属性,这个link就是一个字符串。

<a href="link"> to menvscode </a>

        

        v-bind绑定 class

        (1)绑定单个class

<template>
  <div id="app">
    <a :class="classStr"> to menvscode </a>
  </div>
</template>

<script>
import Vue from 'vue'
export default {
  name: 'App',
  data(){ return { classStr:'blue-font' } }
}
</script>

        页面渲染的结果:

<a class="blue-font"> to menvscode </a>

        (2)v-bind绑定的class,与标签本身的class并不冲突

<a :class="classStr" class="mvc"> to menvscode </a>

        页面渲染的结果:

<a class="mvc blue-font"> to menvscode </a>

        若v-bind绑定的class与标签本身的class的名是一样的话,也会存在两个一样的class名。

        (3)对象的方式绑定class

<template>
  <div id="app">
    <a :class="className" class="mvc"> to menvscode </a>
  </div>
</template>

<script>
import Vue from 'vue'
export default {
  name: 'App',
  data(){
    return {
      className:{
        'blue-font':true,
        'red-font':false
      }
    }
  }
}
</script>

        页面渲染结果:通过boolean值来判断是否添加class名。

<a class="mvc blue-font"> to menvscode </a>

        (4)数组的方式绑定class

<template>
  <div id="app">
    <a :class="className"> to menvscode </a>
  </div>
</template>

<script>
import Vue from 'vue'
export default {
  name: 'App',
  data(){
    return { className:['red-font','big-font'] }
  }
}
</script>

        页面渲染结果:

<a class="big-font blue-font"> to menvscode </a>

        在页面上以数组的形式用v-bind绑定class

<template>
  <div id="app">
    <a :class="[classA,classB]"> to menvscode </a>
  </div>
</template>

<script>
import Vue from 'vue'
export default {
  name: 'App',
  data(){
    return { classA:'nameA', classB:'nameB' }
  }
}
</script>

        页面渲染结果:

<a class="nameA nameB"> to menvscode </a>

        (5)数组,对象可以混用

<template>
  <div id="app">
    <a :class="[classA,{'red-font':hasError}]"> to menvscode </a>
  </div>
</template>

<script>
import Vue from 'vue'
export default {
  name: 'App',
  data(){
    return {
      classA:'nameA',
      classB:'nameB',
      hasError:true
    }
  }
}
</script>

        页面渲染结果:

<a class="nameA red-font"> to menvscode </a>

        

        绑定样式

<template>
  <div id="app">
    <a :class="[classA,{'red-font':hasError}]" :style="styleCss"> to menvscode </a>
  </div>
</template>

<script>
import Vue from 'vue'
export default {
  name: 'App',
  data(){
    return {
      classA:'nameA',
      hasError:true,
      styleCss:{
        'fontSize':'20px',
        'color':'red'
      }
    }
  }
}
</script>

        页面渲染结果:

<a class="nameA red-font" style="font-size: 20px; color: red;"> to menvscode </a>

        (6)绑定多个

<p class="bg" :class="[{ 'first':index==0},{'second':index==1},{'thirdly':index==2}]"></p>
标签: vue v-bind
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码