专栏首页Devops专栏11. Vue 中通过v-bind属性绑定为元素,设置class类样式

11. Vue 中通过v-bind属性绑定为元素,设置class类样式

使用class样式

  1. 数组
<h1 :class="['red', 'thin']">通过v-bind属性绑定为元素</h1>
  1. 数组中使用三元表达式
<h1 :class="['red', 'thin', isactive?'active':'']">通过v-bind属性绑定为元素</h1>
  1. 数组中嵌套对象
<h1 :class="['red', 'thin', {'active': isactive}]">通过v-bind属性绑定为元素</h1>
  1. 直接使用对象
<h1 :class="{red:true, italic:true, active:true, thin:true}">通过v-bind属性绑定为元素</h1>

上面罗列了四种v-bind绑定元素class样式的方式,下面逐个示例。

首先编写样式,使用class直接设置样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .red {
            color: red;
        }

        .thin {
            font-weight: 200;
        }

        .italic {
            font-style: italic;
        }

        .active {
            letter-spacing: 0.5em;
        }
    </style>
</head>
<body>

    <div id="app">

        <h1 class="red thin italic active">通过v-bind属性绑定为元素</h1>

    </div>

    <!--  1.导入vue.js库  -->
    <script src="lib/vue.js"></script>

    <script>
        // 2. 创建一个Vue的实例
        var vm = new Vue({
            el: '#app',
            data: {},
            methods:{}
        })
    </script>

</body>
</html>

浏览器显示如下:

数组 的方式来设置class样式

因为v-bind的绑定的内容是js表达式,所以传递的参数是一个字符串数组[ 'red', 'thin', 'italic', 'active' ]),浏览器显示效果如下:

数组中使用三元表达式设置class样式

浏览器显示如下:

但是其实三元表达式增加了代码的可读性难度,下面可以使用对象字典的方式来设置如下。

数组中嵌套对象

浏览器显示如下:

直接使用对象

浏览器显示如下:

这样直接在class上写对象的方式的确可以设置样式了,还可以将其作为一个对象写到data中,如下:

浏览器显示如下:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Redis 数据结构之set无序集合

    Devops海洋的渔夫
  • Openresty 配置访问静态文件,拆分路径

    那么如果,我想要根据前面的路径再拆分一下请求呢? 例如:我有另一个工作目录/work/moniter-web/web/redis,需要访问另一个子路径url(...

    Devops海洋的渔夫
  • GitBook - 安装插件 - 内容折叠功能 - 解决代码过长,影响阅读问题

    Devops海洋的渔夫
  • LINUX中详解AWK内建变量FS,NF,NR,RT,RS,ORS,OFS

    看了网上好多关于AWK内建变量的文章,这里加上个人的理解和记忆,可以让大家掌握这些变量的基本用法。

    砸漏
  • Vue第一天

    V-bind 只能实现数据单向绑定,从 M 自动绑定到 V ,无法实现数据双向的绑定。

    DataScience
  • 原创 | 一文了解边缘计算和边缘AI

    这个9月,AI芯片独角兽地平线发布了自诩最强边缘 AI 芯片地平线「旭日3」,一时间引起轰动。相比第二代芯片,「旭日3」的AI性能上得到很大提升,只需在 2.5...

    数据派THU
  • 边缘计算的总体思考

    7月4日,在2019百度AI开发者大会上,百度携手三大运营商、浪潮、英特尔等联合发布了百度AI边缘计算行动计划和《AI边缘计算技术白皮书》,白皮书系统阐述了5G...

    边缘计算
  • 数据库介绍以及使用

    第1章 数据库介绍 1.1 数据库概述 l 什么是数据库 数据库就是存储数据的仓库,其本质是一个文件系统,数据按照特定的格式将数据存储起来,用户可以...

    Java学习
  • 万物赋能:边缘计算与人工智能交融使能

    边缘智能依托于边缘计算的低时延、分布式的特性,实现了将人工智能的自主学习、智能决策能力进行下放。

    边缘计算
  • 边缘计算与智能服务

    随着信息化的不断发展,人们对互联网提出了更高的生活需求,5G、人工智能、物联网等新兴技术应运而生,万物互联已经成为一种新的发展趋势。网络技术不再只停留于原来的数...

    边缘计算

扫码关注云+社区

领取腾讯云代金券