v-bind绑定class操作样式（对象语法/数组绑定）

最新推荐文章于 2024-05-10 18:15:56 发布

407指导员

最新推荐文章于 2024-05-10 18:15:56 发布

阅读量2.7k

点赞数

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

本文链接：https://blog.csdn.net/LIUCHUANQI12345/article/details/110926401

版权

vue 专栏收录该内容

64 篇文章 0 订阅

订阅专栏

v-bind使用

mustache语法只能在标签内容中使用，在标签的属性值里，是无法解析该语法的。

v-bind用于绑定一个或多个属性值，或者向另一个组件传递props值(这个学到组件时再介绍)

<div id="app">
  <img v-bind:src="imgURL"  alt="">
  <a v-bind:href="aURL">百度一下</a>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      imgURL:'https://imgcdn.toutiaoyule.com/20201207/5059d8e3a8bebe60aad68e36e07ef50d.jpg',
      aURL:'https://www.baidu.com'
    }
  });
</script>

语法糖简写格式

用：代替v-bind:

<!--语法糖的写法-->
<a :href="aURL">百度一下</a>

v-bind绑定class操作样式（对象语法）

在之前js中我们学了通过js操作类名，如果需要修改样式我们不再使用style修改内联样式，而是通过添加和移除class类名，来实现样式修改，减少浏览器渲染次数。在vue的v-bind不仅简化了语法，更是简化了增加减少样式的操作。

v-blid:class的属性中可以传入一个对象，对象中包括一组组键值对，类名就是对应的样式，也就是键；后边的值就是对应着增加和移除该类，取值是true和false

<h2 :class="{类名1:true/false,类名2:true/false}"> {{message}}</h2>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>一</title>
  <style>
    .style1 {
      font-size: 25px;
      text-align: center;
    }

    .style2 {
      font-size: 60px;
      text-align: left;
      color: cadetblue;
    }
  </style>
</head>
<body>
<div id="app">
  <!--  <h2 :class="{类名1:true/false,类名2:true/false}"> {{message}}</h2>-->
  <h2 v-bind:class="{style1:style1,style2:style2}">vue</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      style1: true,
      style2: true
    }
  });
</script>
</body>
</html>

在这里插入图片描述

通过data中的style1和style2中保存的布尔值，可以控制这两个样式的存在与否。

在这里插入图片描述

注意点

1.是methods不是method

2.在一个标签里可以有多个class属性值，也可以多个class属性，vue会将普通的class和v-bind的class合并

简写方式

<h2 class="style3" v-bind:class="getClass()">vue</h2>

getClass:function () {
  return {style1:this.style1,style2:this.style2}
}

注意方法的调用一定不可漏掉(),如果只写getClass是没用的，绑定点击函数时括号是可以省略的
<button v-on:click="btnClick">点我变色</button>

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

<h2 :class="[active,line]">{{message}}</h2>

data: {
  message: '你好啊',
  active:'style',
  line:'style2',
}

数组语法用的很少，和直接写死的区别是，在[active,line]中没有加单引号，vue会将其当成变量解析，如果直接加单引号，就会被当成类名的字符串，也可以写到methods方法中。
在这个vue实例中使用变量，要加上this.

407指导员

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
v-bind绑定class操作样式（对象语法/数组绑定）

v-bind使用mustache语法只能在标签内容中使用，在标签的属性值里，是无法解析该语法的。v-bind用于绑定一个或多个属性值，或者向另一个组件传递props值(这个学到组件时再介绍)<div id="app"> <img v-bind:src="imgURL" alt=""> <a v-bind:href="aURL">百度一下</a></div><script src="../js/vue.js"><
复制链接

扫一扫