v-bind绑定class或style的基础语法

v-bind绑定class

方式一：对象语法

对象语法的含义是:class后面跟的是一个对象

<h2 :class="{类名1: value1, 类名1: value2}">{{message}}</h2>

用法一：直接通过{}绑定一个类
<h2 :class="{'active': isActive}">Hello World</h2>

用法二：也可以通过判断，传入多个值
<h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>

用法三：和普通的类同时存在，并不冲突
注：如果isActive和isLine都为true，那么会有title/active/line三个类
<h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2>

用法四：如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性
<h2 class="title" :class="classes">Hello World</h2>

demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .active {
      color: red;
    }
　　.line{
　　　　border-bottom:1px solid #000;
　　}
  </style>
</head>
<body>

<div id="app">
  <h2 class="title" v-bind:class="{active: isActive, line: isLine}">{{message}}</h2>
  <h2 class="title" v-bind:class="changeClass()">{{message}}</h2>
  <button v-on:click="btnClick">按钮</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'bind绑定class',
      isActive: true,
      isLine: true
    },
    methods: {
      btnClick(){
        this.isActive = !this.isActive
      },
      changeClass(){
        return {active: this.isActive, line: this.isLine}
      }
    }
  })
</script>
</body>
</html>

方式二：数组语法

数组语法的含义是:class后面跟的是一个数组

用法一：直接通过{}绑定一个类
<h2 :class="['active']">Hello World</h2>

用法二：也可以传入多个值
<h2 :class="['active', 'line']">Hello World</h2>

用法三：和普通的类同时存在，并不冲突
注：会有title/active/line三个类
<h2 class="title" :class="['active', 'line']">Hello World</h2>

用法四：如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性
<h2 class="title" :class="classes">Hello World</h2>

demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
　<style>
    .active {
      color: red;
    }
　　.line {
　　　　border-bottom:1px solid #000;
　　}
  </style>
</head>
<body>

<div id="app">
  <h2 class="title" :class="[active, line]">{{message}}</h2>
  <h2 class="title" :class="changeClass()">{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'v-bind绑定class',
    },
    methods: {
      changeClass: function () {
        return [this.active, this.line]
      }
    }
  })
</script>
</body>
</html>

v-bind绑定style

方式一：对象语法

对象语法的含义是:style后面跟的是一个对象

<h2 :style="{key(属性名): value(属性值)}">{{message}}</h2>

style后面跟的是一个对象类型
　　对象的key是CSS属性名称
　　对象的value是具体赋的值，值可以来自于data中的属性

:style="{color: 'red', fontSize:'50px'}"

demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <h2 class="title" :style="{color: 'red', fontSize: '50px'">{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'v-bind绑定style',
    }
  })
</script>
</body>
</html>

方式二：数组语法

数组语法的含义是:class后面跟的是一个数组

style后面跟的是一个数组类型
　　多个值以，分割即可

<div v-bind:style="[bgc, fontsize]"></div>

demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <h2 :style="[bgc, fontsize]">{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      bgc: {backgroundColor: 'red'},
      fontsize: {fontSize: '100px'},
    }
  })
</script>
</body>
</html>

v-bind绑定class或style的基础语法

猜你喜欢