WEB前端
  1. Vue
    1. WEB前端 - Vue - 安装
    2. WEB前端 - Vue - webpack目录结构与第一个项目示例
    3. WEB前端 - Vue - 基础语法
    4. WEB前端 - Vue - 条件语句与循环语句
    5. WEB前端 - Vue - 函数与计算属性
    6. WEB前端 - Vue - 监听属性
    7. WEB前端 - Vue - 样式绑定
    8. WEB前端 - Vue - 表单
    9. WEB前端 - Vue - 组件详解
    10. WEB前端 - Vue - 路由
    11. WEB前端 - Vue - 生命周期钩子函数

WEB前端 - Vue - 样式绑定

程序员日记      2019-09-16

class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性。

Vue.js v-bind 在处理 class 和 style 时, 专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组。

示例1.当 isActive = true 时,将绑定样式active。

<template>
  <div id="app">
    <div v-bind:class="{ active: isActive }">测试绑定</div>
  </div>
</template>
<script>
export default {
  name: 'App',
  data: function(){
    return {
      isActive: true,
    }
  }
};
</script>
<style scoped>
.active {
  background:red;
}
</style>

示例2.多个样式绑定

<template>
  <div id="app">
    <div class="fc" v-bind:class="{ 'active': isActive,'err':isErr }">测试绑定</div>
  </div>
</template>
<script>
export default {
  name: 'App',
  data: function(){
    return {
      isActive: true,
      isErr:true,
    }
  }
};
</script>
<style scoped>
.active {
  background:green;
}
.fc{
  color:#FFF;
}
.err{
  font-size: 100px;
  font-weight: bold;
}
</style>

示例3.使用对象指定要绑定的样式

<template>
  <div id="app">
    <div class="fc" v-bind:class="classobj">测试绑定</div>
  </div>
</template>
<script>
export default {
  name: 'App',
  data: function(){
    return {
      classobj:{
        'active': true,
        'err':true,
      }
    }
  }
};
</script>
<style scoped>
.active {
  background:green;
}
.fc{
  color:#FFF;
}
.err{
  font-size: 100px;
  font-weight: bold;
}
</style>

示例4.使用数组赋值给要绑定的样式

<template>
  <div id="app">
    <div class="fc" v-bind:class="[activeClass,errClass]">测试绑定</div>
  </div>
</template>
<script>
export default {
  name: 'App',
  data: function(){
    return {
      activeClass:'active',
      errClass:'err',
    };
  }
};
</script>
<style scoped>
.active {
  background:green;
}
.fc{
  color:#FFF;
}
.err{
  font-size: 100px;
  font-weight: bold;
}
</style>

示例5.style(内联样式)

<template>
  <div id="app">
    <div v-bind:style="{ color:tColor,fontSize:fontSize+'px'}">测试绑定样式</div>
    <div v-bind:style="classobj">测试绑定样式</div>
    <div v-bind:style="[classobj,classobj2]">测试绑定样式</div>
  </div>
</template>
<script>
export default {
  name: 'App',
  data: function(){
    return {
      fontSize:100,
      tColor:'red',
      classobj:{
        color:'green',
        fontSize:'50px'
      },
      classobj2:{
        background:'#000',
      }
    };
  }
};
</script>
<style scoped>
.active {
  background:green;
}
.fc{
  color:#FFF;
}
.err{
  font-size: 100px;
  font-weight: bold;
}
</style>