Vue - 动态

动态class

用v-bind给标签class设置动态的值

如何给标签class属性动态:

• 语法:
  • :class="{类名: 布尔值}" 布尔值 为true表示使用类名,false表示不用
    
    正常的class也可以用 ,也可以同时使用
  • :class="[类名, 类名]"

<template>
  <div>
    <p :class="{redStr: bool}">值为true, key作为类名生效</p>
    <p class="redStr" :class="classArr">传入数组, 可以设置多个类名, 也可以和静态共存</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bool: true,
      classArr: ['blueStr', 'pinkStr']
    };
  }
};
</script>

<style scoped>
.redStr{
  color: red;
}
.blueStr{
  color: blue;
}
.pinkStr{
  color: pink;
}
</style>

其实就是把类名保存在vue变量中赋予给标签

动态style

给标签动态设置style的值

语法

• :style="{css属性: 值}"

动态style的key都是css属性名

值可以直接给字符串或数字,也可以给变量

<template>
  <div>
    <p :style="{color: colorStr}">value变量的值, 将被赋予给css属性的key生效</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      colorStr: 'red'
    };
  }
};
</script>

动态style的key都是css属性名