Vue｜样式绑定

小咪咪 2023-09-29 23:47 81阅读 0赞

968f4c3a9001403aaa609f4e85ac2933.gif

class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。Vue.js v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。
文末名片获取源码
精彩专栏持续更新推荐订阅，收藏关注不迷路
14e22f38cc7949e9a8b88aec013d8b82.png
微信小程序实战开发专栏

#

  • 一. 样式绑定
    • 1.1 动态指定
    • 1.2 数组写法
    • 1.3 对象写法
    • 1.4 内联样式

一. 样式绑定

1.1 动态指定

开始前的准备工作如下：预设好的style样式，html容器以及vue实例对象

在这里插入图片描述

启动项目后效果如下

在这里插入图片描述

  1. <style>
  2.     .basic{
  3.         width: 200px;
  4.         height: 200px;
  5.         color: black;
  6.         border:1px solid black;
  7.     }
  8.     .basic2{
  9.         width: 200px;
  10.         height: 200px;
  11.         color: white;
  12.         background: green;
  13.     }
  14.     .cat1{
  15.         width: 200px;
  16.         height: 200px;
  17.         color: green;
  18.     }
  19.     .cat2{
  20.         background: yellow;
  21.     }
  22.     .cat3{
  23.         font-weight: bold;
  24.     }
  25. </style>
  26. <div class="basic" :class="classIcon" @click="changeBackground">
  27.      {
  28.    {name}}
  29.  </div>

目前所看到的样式效果是我们在style中定义的同时通过class进行指定的，那么需求就来了，如何做到点击div的时候给它换一个背景色呢?

a2adc035ff2b4e2eb429400f83dd9543.png

在JS中是可以通过操作dom的方式来修改元素的class属性的

  1. var div = document.getElementById("div1");
  2. div.className = "style2";
  3. div.setAttribute("class","style2");

但是既然使用了vue，入乡随俗肯定要用vue的方式来解决，而且用传统的方式来修改也有着不确定性，因为在界面中，需要操作的元素样式可能是不断变化的；

在这里插入图片描述

在标签中通过v-bind简写的方式再增加一个class，同时增加一个点击事件

在这里插入图片描述

在css定义好basic2的样式，启动项目，可以看到当点击div时，字体以及背景颜色都发生了变化，这说明动态指定class的事件生效了

在这里插入图片描述

在网页右击查看源代码可以看到，div上面的class只剩一个了，但是我们代码里面是两个，这是因为动态指定的class样式最终会自行汇聚成一个正常的class样式

在这里插入图片描述
在这里插入图片描述

1.2 数组写法

这一小节要讲的是针对与样式的个数以及名字不确定的场景，通过数组写法绑定class样式

b852dd0bc19b40a29d1cb425ebf854ed.png

首先在style中准备三个不同效果的class样式

在这里插入图片描述

  1. .cat1{
  2.     width: 200px;
  3.     height: 200px;
  4.     color: green;
  5. }
  6. .cat2{
  7.     background: yellow;
  8. }
  9. .cat3{
  10.     font-weight: bold;
  11. }

在vue实例中定义一个数组并将class名进行指定

在这里插入图片描述

在html中的div标签中对arr进行绑定

在这里插入图片描述

  1. <div :class="arr">
  2.     {
  3.    {name}}
  4. </div>

运行项目可以看到数组方式的样式也绑定上去了，数组方式绑定class样式适用于样式的个数以及名字不确定的场景

在这里插入图片描述

1.3 对象写法

对象写法绑定class样式，适用于样式的个数以及名字都确定的场景,但是要根据业务场景动态决定是否使用，可以简单应用到当切换tab时根据不同的下标展示不同的效果

在这里插入图片描述

在vue实例data中定义对象如下，以普通的键值对方式存储，键为需要绑定的class名称，值为bool类型，需要展示则为true，反之则为false

在这里插入图片描述

  1. info:{
  2.   'cat1':false,
  3.     'cat2':false,
  4. },

在页面标签中对样式进行绑定，因为在数据中两个class都为false，所以页面解析后是没有任何样式绑定的

在这里插入图片描述
在这里插入图片描述

将定义的值修改为true，再次刷新页面，这一次就能渲染上去了

在这里插入图片描述

1.4 内联样式

内联样式绑定,适用于需要在行内根据数据形态做不同的展示的场景，常规的内联样式如下

在这里插入图片描述

  1. <div class="basic" style="color:red;">{
  2.    {name}}</div>

在vue中还是通过v-bing简写的方式进行绑定，不过需要加上单括符，不要忘了在data中进行定义

在这里插入图片描述

  1. <div class="basic" :style="{color:fontColor}">{
  2.    {name}}</div>

在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，81人围观）

还没有评论，来说两句吧...

相关阅读

    相关 vue绑定样式

    3.1、绑定class 绑定class样式--字符串写法，适用于:样式的类名不确定，需要动态指定 <div class="basic" :class="mood"

    灰太狼灰太狼/ 0 赞/ 83 阅读

    相关 VUE 样式绑定

    操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接

    蔚落蔚落/ 0 赞/ 455 阅读