[JavaScript知识库]了解vue动态绑定

vue中动态绑定样式有两种方法

1.动态绑定class

2.动态绑定style

一、动态绑定class

接下来我们先了解一下怎么动态的设置class

首先，动态的设置class是什么意思呢

打个比方：

<div class="a"></div>

先埋伏好两个类一个是.a{}一个是.b{}，到时候我要改样式，我就把a改成b，这个动作就相对于动态修改属性的值，类似于v-bind简写为“：”

<div class="xxxx"></div>

语法：

格式1：<标签:class="变量"/>

格式2：<标签:class="{类名1:布尔值,类名2:布尔值}"/>

如果布尔值为true，就添加对应的类名

说明：可以和静态class共存

示例代码

<template>
  <div id="app">
    <h3>动态绑定class</h3>
    <!-- 固定的 -->
    <p class="red">p的内容 样式是固定的</p>
    <p :class="type">p的内容 class="变量"</p>
    <p :class="['red','font']">p的内容 class="数组"</p>
    <p :class="{red:false,blue:true,font:true}">p的内容 class="对象"</p>
    <!-- 可以和静态的class共存，生成的效果是叠加的效果 -->
    <p class="content" :class="{red:false,blue:true,font:true}">p的内容 class="对象"</p>

  </div>
</template>

<script>
export default {
  data(){
    return{
      // type:'red'
      type:'blue'
    }
  }
}
</script>

<style>
.content{background-color: #ccc;}
.font{font-size: 40px;}
.red{color:red}
.blue{color:blue}

body{
  background-color: #ccc;
}
#app{
  width: 400px;
  margin: 20px auto;
  background-color: #fff;
  border: 4px solid blueviolet;
  border-radius: 1em;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
  padding: 1em 2em 2em;
}
h3{
  text-align: center;
}

</style>

二、动态绑定style

动态绑定style属性有两种方式：

对象形式

v-bind绑定style使用对象

语法：

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

1.可以和静态style共存

2.样式中带-属性的写成小驼峰

示例代码

<template>
  <div id="app">
    <h3>动态绑定style</h3>
    <p style="border:1px solid red" :style="obj">p的内容 :style="对象"</p>
    <button @click="fn">随机设置字体大小</button>
  </div>
</template>

<script>
export default {
  data(){
    return{
      obj:{
        backgroundColor:'#ccc',
        color:"red",
        fontSize:'40px'
      }
    }
  },
  methods:{
    fn(){
      const fs = Math.random() * 100
      this.obj.fontSize = fs + 'px'
    }
  }
}
</script>

<style>
.content{background-color: #ccc;}
.font{font-size: 40px;}
.red{color:red}
.blue{color:blue}

body{
  background-color: #ccc;
}
#app{
  /* width: 400px; */
  margin: 20px auto;
  background-color: #fff;
  border: 4px solid blueviolet;
  border-radius: 1em;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
  padding: 1em 2em 2em;
}
h3{
  text-align: center;
}

</style>