标签设置动态值- 动态class与动态style

vue基础-动态class

作用:

给标签设置动态的值

语法:

* (1)<标签 :class="变量">  (通过data传值)
* (2)<标签  :class=[]> (直接在数组中设置类名)
* (3)<标签  :class={类名:布尔值(布尔值可以是true,true就是添加这个类名/false或者表达式)}>(直接在对象中设置类名)

• 方法(1)和方法(2)相当于基础的直接在标签内写入
• 方法(3)常用 !!!!!!!

代码如下:

<template>
  <div>
    <h1>18 动态绑定class</h1>
    <!-- 1.data传值 -->
    <p :class="type">动态绑定class 场景1</p>
    <!-- 2.数组 -->
    <p :class="[red,number]" ></p>
​
    <!-- 3.对象 -->
    <p :class="{ red: false }">hhhhhh</p>
    <input type="text" :class="{ number: num}" v-model="num"/>
   
  </div>
</template>
​
<script>
export default {
  data() {
    return {
      type: "red",
      num: '',
    };
  },
  methods: {},
};
</script>
​
<style>
.red {
  color: red;
  font-size: 40px;
}
.number {
  color: blue;
}
</style>

vue基础-动态style

是什么:

给标签设置动态的style值

语法:

<标签 :style="{css属性名: 值}" />

代码如下:

<template>
  <div>
    <h1>19 动态绑定style</h1>
    <!-- 1.对象 -->
    <p :style="styelData">任务很重</p>
    <p :style="styleArr">要加油呀!!</p>
  </div>
</template>
​
<script>
export default {
  data() {
    return {
      //1.数组
      styleArr: [{ color: "blue" }, { fontSize: "40px" }],
      // 2.对象
      styelData: {
        color: "pink",
        fontSize: "50px",//注意此处不是需要小驼峰命名,不然会报错
      },
    };
  },
};
</script>
​
<style>
</style>