Day9——v-bind动态绑定class、style

最新推荐文章于 2023-05-23 18:03:09 发布

Android_la

最新推荐文章于 2023-05-23 18:03:09 发布

阅读量209

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_40634846/article/details/107400702

版权

Vue 专栏收录该内容

25 篇文章 2 订阅

订阅专栏

文章目录

一. 回顾
二. v-bind绑定属性

一. 回顾

前面学习了Day8——v-bind的基本使用，今天学习v-bind绑定class、style属性

二. v-bind绑定属性

2.1 v-bind动态绑定class(对象语法)

语法：用大括号{}表示对象，对象里面有很多键值对，key是类名，value是布尔值。value为true时，对应的类名才会被加入到class属性中。

例子一：

<style>
  .active{
    color: red;
  }
</style>
<body>
<div id="app">
  <!-- 添加类名到class中的做法-->
  <h2 class="active">{{message}}</h2>
  <h2 :class="active">{{message}}</h2>
  <!-- vue的做法，给class属性传一个对象，里面有多个键值对，布尔值为true，对应的类名才会被加到class属性中 -->
  <h2 v-bind:class="{key1: true, key2: false, key3: true}">{{message}}</h2>
  <h2 v-bind:class="{active: true, line: false}">{{message}}</h2>
  <!-- 它会将class属性以及动态绑定的class属性合并起来同时生效。布尔值可以使用变量代替，vue解析时会去vue实例中的data属性查找变量 -->
  <h2 class="title" v-bind:class="{active: isActive, line: isLine}">{{message}}</h2>
  <button v-on:click="btnClick">按钮</button>


</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      isActive: 'true',
      isLine: 'false',
    },
    methods: {
      btnClick: function(){
        this.isActive = !this.isActive;
      }
    }
  })
</script>

</body>

效果：
在这里插入图片描述

例子二：

<style>
  .active{
    color: red;
  }
</style>
<body>
<div id="app">
  <h2 class="title" v-bind:class="{active: isActive, line: isLine}">{{message}}</h2>
  <!-- 如果class属性中过于复杂，可以放在一个methods或者computed中-->
  <h2 class="title" v-bind:class="getClasses()">{{message}}</h2>
  <button v-on:click="btnClick">按钮</button>


</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      isActive: 'true',
      isLine: 'false',
    },
    methods: {
      btnClick: function(){
        this.isActive = !this.isActive;
      },
      getClasses: function () {
          return {active: this.isActive, line: this.isLine}
      }
    }
  })
</script>

</body>

效果:
在这里插入图片描述

2.2 v-bind动态绑定class(数组语法)

语法：使用中括号[ ]，括号中的元素会被添加到class中，其实数组语法和直接写道class属性中没什么区别

例子：

<style>
  .active{
    color: red;
  }
</style>
<body>
<div id="app">
  <h2 class="title" v-bind:class="['active', 'line']">{{message}}</h2>
  <h2 class="title" v-bind:class="[active, line]">{{message}}</h2>


</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      active: 'aaa',
      line: 'bbb',
    }
  })
</script>

</body>

效果：
在这里插入图片描述

2.3 v-bind动态绑定style（对象语法）

语法：style中的各css属性名可以使用驼峰式（比如fontSize）或短横线连接（若用短横线连接，要用单引号'将key括起来，比如‘font-size’）

例子：

<body>
<div id="app">
  <!--<h2 :style="{key(css属性名): value(属性值)}">{{message}}</h2>-->
  <!-- 属性名使用驼峰写法或者短横线(若用短横线，要用单引号将key括起来) -->
  <h2 :style="{'font-size': '50px'}">{{message}}</h2>
  <h2 :style="{fontSize: size, color: finalColor}">{{message}}</h2>
  <h2 :style="{fontSize: fixSize + 'px'}">{{message}}</h2>
  <!-- 抽取到methods中 -->
  <h2 :style="getStyles()">{{message}}</h2>

</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      size: '50px',
      fixSize: 50,
      finalColor: 'red'
    },
    methods: {
      getStyles: function () {
        return {fontSize: this.size, backgroundColor: this.finalColor}
      }
    }
  })
</script>
</body>

效果：
在这里插入图片描述

2.4 v-bind动态绑定style（数组语法）

语法：用中括号[ ]括起来

例子：

<body>
<div id="app">
  <h2 :style="[baseStyle, baseStyle1]">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      baseStyle: {fontSize: '50px'},
      baseStyle1: {backgroundColor: 'red'},
    }
  })
</script>
</body>

效果:
在这里插入图片描述

Android_la

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Day9——v-bind动态绑定class、style

文章目录一. 回顾二. v-bind绑定属性2.1 v-bind动态绑定class(对象语法)2.2 v-bind动态绑定class(数组语法)2.3 v-bind动态绑定style（对象语法）2.4 v-bind动态绑定style（数组语法）一. 回顾前面学习了Day8——v-bind的基本使用，今天学习v-bind绑定class、style属性二. v-bind绑定属性2.1 v-bind动态绑定class(对象语法)语法：用大括号{}表示对象，对象里面有很多键值对，key是类名，value是
复制链接

扫一扫

专栏目录