Vue项目Class与Style绑定

Vue项目Class与Style绑定

Vue中的的class和style 用法类似都有对象语法，数组语法 ，以下示例简单演示Vue项目Class和Style的使用

Vue项目中Class绑定使用

<template>
  <div class="HelloWorld">
    <!--对象用法 对象的属性名称为class名称-->
    <div
      class="static"
      v-bind:class="{ addClass: isAddClass, removeClass: isRemoveClass }"> 你好我好大家好 </div>
    <!-- 数组语法  数组中每一项都是指的calss名称-->
    <div v-bind:class="['addClass', 'removeClass']">天气不好emo~</div>
    <!-- 数组语法 三元运算符形式-->
    <div v-bind:class="[isAddClass ? 'addClass' : 'removeClass']">哈啰单车</div>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      isAddClass: true,
      isRemoveClass: true,
    };
  },
};
</script>
<style scoped>
.addClass {
  border: 1px solid red;
}
.removeClass {
  color: yellowgreen;
}
</style>

Vue项目中Style绑定使用

<template>
  <div class="HelloWorld">
  <!-- style绑定对象形式  对象的属性名是css样式-->
  <div v-bind:style="{ color: 'red', fontSize: '30' + 'px' }"> 会当凌绝顶，一览众山小</div>
  <!-- 数组语法 数组里面存放每个样式对象 -->
  <div v-bind:style="[baseStyleObj, addStyleObj]">不畏浮云遮望眼，自缘身在最高层</div>
   <!--多重值 常用于提供多个带前缀的值-->
  <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }">欲穷千里目，更上一层楼。</div>
</div>
</template>
<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      baseStyleObj:{
        border:'1px solid red',
        color:'#ccc',
        fontSize:'16px'
      },
      addStyleObj:{
         padding:"4px",
         margin:'20px'
      }
    }
  },
};
</script>