Vue语法基础三(样式绑定)

Posted africancu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue语法基础三(样式绑定)相关的知识,希望对你有一定的参考价值。

  Vue绑定样式有绑定class绑定style两种方式,这两种方式都有对象语法数组语法

 

一、class绑定

  1.1 对象语法

  使用js对象的方式,也就是key-value的方式,给元素的class属性绑定样式,其中key是样式,value控制key样式是否有效,value是个布尔值。

<style>
  div div {
    width: 100px;
    height: 100px;
  }
  .active {
    background-color: green;
  }
</style>

<div id="app">
  <div :class="{active: isActive}"></div>
  <button @click="chgStyle">切换背景色</button>
</div>

<script>
  let vm = new Vue({
    el: #app,
    data: {
      isActive: true,
    },
    methods: {
      chgStyle() {
        this.isActive = !this.isActive;
      }
    }
  })
</script>

  js对象中可以放置多个样式,如下:

<style>
  div div {
    width: 100px;
    height: 100px;
  }
  .active {
    background-color: green;
  }
  .border {
    border: 2px solid red;
  }
</style>

<div id="app">
  <div :class="{active: isActive, border: hasBorder}"></div>
  <button @click="chgStyle">切换背景色</button>
  <button @click="chgBorder">切换边框</button>
</div>

<script>
  let vm = new Vue({
    el: #app,
    data: {
      isActive: true,
      hasBorder: false
    },
    methods: {
      chgStyle() {
        this.isActive = !this.isActive;
      },
      chgBorder() {
        this.hasBorder = !this.hasBorder
      }
    }
  })
</script>

  这样就可以同时控制两个样式的切换,如果有更多样式,同理。

 

  1.2 数组语法

  给class属性绑定的值也可以是个数组,数组中的元素既可以是data中的变量,也可以直接放类名(字符串形式)。

<style>
  div div {
    width: 100px;
    height: 100px;
  }
  .color {
    background-color: green;
  }
  .border {
    border: 1px solid red;
  }
</style>

<div id="app">
  <div :class="[bgClass, ‘border‘]">class数组语法</div>
  <button @click="handle">切换</button>
</div>

<script>
  let vm = new Vue({
    el: #app,
    data: {
      bgClass: color,
    },
    methods: {
      handle() {
        this.bgClass = ‘‘
      }
    }
  })
</script>

  点击切换按钮,可以将背景样式置空。

 

二、style绑定

  2.1 对象语法

  绑定style时的对象语法,跟内联样式的写法一样,只是css值部分采用了变量来替代。对照绑定class时的对象语法,那是定义好一个内部样式,用value部分来控制内部样式是否有效。

<div id="app">
  <div :style="{color: color, fontSize: fontSize + ‘px‘}">style对象语法</div>
  <button @click="bigger">字号变大</button>
</div>

<script>
  let vm = new Vue({
    el: #app,
    data: {
      color: red,
      fontSize: 10
    },
    methods: {
      bigger() {
        this.fontSize = this.fontSize + 5
      }
    }
  })
</script>

 

  2.2 数组语法

  style的数组语法跟class的数组语法一样,都是从内部样式表中引入一个或者多个样式,并且满足css的样式层叠规则。

<div id="app">
  <div :style="[baseStyle, overrideStyle]">style数组语法</div>
  <button @click="handle">切换</button>
</div>

<script>
  let vm = new Vue({
    el: #app,
    data: {
      baseStyle: {
        width: 200px,
        height: 200px,
        border: 1px red solid
      },
      overrideStyle: {
        width: 400px,
        border: 2px blue dotted
      }
    },
    methods: {
      handle() {
        this.overrideStyle = ‘‘
      }
    }
  })
</script>

  因为发生了样式层叠,起先表现为一个宽400高200的虚线蓝框,当我们点击切换按钮时,overrideStyle被置空,这时候只有baseStyle样式生效,就变成了一个宽200高200的实线红框。

 

  总结一下:

  class的对象语法和style的对象语法不同,前者用布尔值控制样式是否生效,后者跟css写法一样。

  class的数据语法和style的数组语法相同,都是引入多个内部样式。

 

  PS:本系列文章同步更新于资浅码农的公众号

  技术图片

以上是关于Vue语法基础三(样式绑定)的主要内容,如果未能解决你的问题,请参考以下文章

Vue.js高效前端开发 • Vue基本指令

Vue.js高效前端开发 • Vue基本指令

Vue基础系列——Vue模板中的数据绑定语法

Vue全家桶之Vue基础

05《Vue 入门教程》Vue 动态样式绑定

Vue知识点全集