草庐IT

Vue3 样式绑定

runoob 2023-04-06 原文

Vue3 样式绑定

Vue.js class

class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性。

v-bind 在处理 class 和 style 时, 表达式除了可以使用字符串之外,还可以是对象或数组。

v-bind:class 可以简写为 :class


class 属性绑定

我们可以为 v-bind:class 设置一个对象,从而动态的切换 class:

实例 1

实例中将 isActive 设置为 true 显示了一个绿色的 div 块,如果设置为 false 则不显示:

<div :class="{ 'active': isActive }"></div>

尝试一下 »

以上实例 div class 渲染结果为:

<div class="active"></div>

我们也可以在对象中传入更多属性用来动态切换多个 class 。

此外,:class 指令也可以与普通的 class 属性共存。

实例 2

text-danger 类背景颜色覆盖了 active 类的背景色:

<div class="static" :class="{ 'active' : isActive, 'text-danger' : hasError }"> </div>

尝试一下 »

以上实例 div class 渲染结果为:

<div class="static text-danger"></div>

当 isActive 或者 hasError 变化时,class 属性值也将相应地更新。例如,如果 active 的值为 true,class 列表将变为 "static active text-danger"。

我们也可以直接绑定数据里的一个对象:

实例 3

text-danger 类背景颜色覆盖了 active 类的背景色:

<div id="app"> <div class="static" :class="classObject"></div> </div>

尝试一下 »

实例 3 与 实例 2 的渲染结果是一样的。

此外,我们也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式:

实例 4

data() { return { isActive: true, error: null } }, computed: { classObject() { return { active: this.isActive && !this.error, 'text-danger': this.error && this.error.type === 'fatal' } } }

尝试一下 »

数组语法

我们可以把一个数组传给 v-bind:class ,实例如下:

实例 5

<div class="static" :class="[activeClass, errorClass]"></div>

尝试一下 »

以上实例 div class 渲染结果为:

<div class="static active text-danger"></div>

我们还可以使用三元表达式来切换列表中的 class :

实例 6

errorClass 是始终存在的,isActive 为 true 时添加 activeClass 类:

<div id="app"> <div class="static" :class="[isActive ? activeClass : '', errorClass]"></div> </div>

尝试一下 »

以上实例 div class 渲染结果为:

<div class="static text-danger"></div>

Vue.js style(内联样式)

我们可以在 v-bind:style 直接设置样式,可以简写为 :style

实例 7

<div id="app"> <div :style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div> </div>

尝试一下 »

以上实例 div style 渲染结果为:

<div style="color: red; font-size: 30px;">菜鸟教程</div>

也可以直接绑定到一个样式对象,让模板更清晰:

实例 8

<div id="app"> <div :style="styleObject">菜鸟教程</div> </div>

尝试一下 »

v-bind:style 可以使用数组将多个样式对象应用到一个元素上:

实例 9

<div id="app"> <div :style="[baseStyles, overridingStyles]">菜鸟教程</div> </div>

尝试一下 »

注意:当 v-bind:style 使用需要特定前缀的 CSS 属性时,如 transform ,Vue.js 会自动侦测并添加相应的前缀。

多重值

可以为 style 绑定中的 property 提供一个包含多个值的数组,常用于提供多个带前缀的值,例如:

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

这样写只会渲染数组中最后一个被浏览器支持的值。在本例中,如果浏览器支持不带浏览器前缀的 flexbox,那么就只会渲染 display: flex。


组件上使用 class 属性

当你在带有单个根元素的自定义组件上使用 class 属性时,这些 class 将被添加到该元素中。此元素上的现有 class 将不会被覆盖。

实例 10

<div id="app"> <runoob class="classC classD"></runoob> </div> <script> // 创建一个Vue 应用 const app = Vue.createApp({}) // 定义一个名为 runoob的新全局组件 app.component('runoob', { template: '<h1 class="classA classB">I like runoob!</h1>' }) app.mount('#app') </script>

尝试一下 »

以上实例 div class 渲染结果为:

<h1 class="classA classB classC classD">I like runoob!</h1>

对于带数据绑定 class 也同样适用:

<my-component :class="{ active: isActive }"></my-component>

当 isActive 为 true 时,HTML 将被渲染成为:

<p class="active">Hi</p>

如果你的组件有多个根元素,你需要定义哪些部分将接收这个类。可以使用 $attrs 组件属性执行此操作:

实例 11

<div id="app"> <runoob class="classA"></runoob> </div> <script> const app = Vue.createApp({}) app.component('runoob', { template: ` <p :class="$attrs.class">I like runoob!</p> <span>这是一个子组件</span> ` }) app.mount('#app') </script>

尝试一下 »

注意:template 中 ` 是反引号,不是单引号 '

以上实例 div class 渲染结果为:

<div id="app" data-v-app=""><p class="classA">I like runoob!</p><span>这是一个子组件</span></div>

有关Vue3 样式绑定的更多相关文章

  1. ruby - 如何使用文字标量样式在 YAML 中转储字符串? - 2

    我有一大串格式化数据(例如JSON),我想使用Psychinruby​​同时保留格式转储到YAML。基本上,我希望JSON使用literalstyle出现在YAML中:---json:|{"page":1,"results":["item","another"],"total_pages":0}但是,当我使用YAML.dump时,它不使用文字样式。我得到这样的东西:---json:!"{\n\"page\":1,\n\"results\":[\n\"item\",\"another\"\n],\n\"total_pages\":0\n}\n"我如何告诉Psych以想要的样式转储标量?解

  2. ruby - 如何在 Ruby 中拆分参数字符串 Bash 样式? - 2

    我正在为一个项目制作一个简单的shell,我希望像在Bash中一样解析参数字符串。foobar"helloworld"fooz应该变成:["foo","bar","helloworld","fooz"]等等。到目前为止,我一直在使用CSV::parse_line,将列分隔符设置为""和.compact输出。问题是我现在必须选择是要支持单引号还是双引号。CSV不支持超过一个分隔符。Python有一个名为shlex的模块:>>>shlex.split("Test'helloworld'foo")['Test','helloworld','foo']>>>shlex.split('Test"

  3. ruby-on-rails - 添加回形针新样式不影响旧上传的图像 - 2

    我有带有Logo图像的公司模型has_attached_file:logo我用他们的Logo创建了许多公司。现在,我需要添加新样式has_attached_file:logo,:styles=>{:small=>"30x15>",:medium=>"155x85>"}我是否应该重新上传所有旧数据以重新生成新样式?我不这么认为……或者有什么rake任务可以重新生成样式吗? 最佳答案 参见Thumbnail-Generation.如果rake任务不适合你,你应该能够在控制台中使用一个片段来调用重新处理!关于相关公司

  4. ruby-on-rails - 创建 ruby​​ 数据库时惰性符号绑定(bind)失败 - 2

    我正在尝试在Rails上安装ruby​​,到目前为止一切都已安装,但是当我尝试使用rakedb:create创建数据库时,我收到一个奇怪的错误:dyld:lazysymbolbindingfailed:Symbolnotfound:_mysql_get_client_infoReferencedfrom:/Library/Ruby/Gems/1.8/gems/mysql2-0.3.11/lib/mysql2/mysql2.bundleExpectedin:flatnamespacedyld:Symbolnotfound:_mysql_get_client_infoReferencedf

  5. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU

  6. ruby - ruby 中绑定(bind)对象的实际使用 - 2

    昨晚,我在思考我认为是高级ruby​​语言的功能,即Continuations(callcc)和Bindingobjects。我的意思是高级,因为我有静态类型的oo语言背景(C#、Java、C++),我最近才发现ruby​​,所以这些语言特性对我来说不是很熟悉。我想知道这些语言功能在现实世界中的用途是什么。根据我的经验,一切都可以用静态类型的oo语言来完成,但有时我不太同意。我想我在阅读SamRuby的那篇好文章时发现了Continuation的美妙之处/兴趣:http://www.intertwingly.net/blog/2005/04/13/Continuations-for-C

  7. ruby - 如何在 Ruby 中使用 "fake"C# 样式属性? - 2

    编辑:我稍微更改了规范,以更好地符合我的想象。好吧,我真的不想伪造C#属性,我想将它们合而为一并支持AOP。给定程序:classObjectdefObject.profile#magiccodehereendendclassFoo#Thisisthefakeattribute,itprofilesasinglemethod.profiledefbar(b)putsbenddefbarbar(b)puts(b)endcomment("thisreallyshouldbefixed")defsnafu(b)endendFoo.new.bar("test")Foo.new.barbar("t

  8. (附源码)vue3.0+.NET6实现聊天室(实时聊天SignalR) - 2

    参考文章搭建文章gitte源码在线体验可以注册两个号来测试演示图:一.整体介绍  介绍SignalR一种通讯模型Hub(中心模型,或者叫集线器模型),调用这个模型写好的方法,去发送消息。  内容有:    ①:Hub模型的方法介绍    ②:服务器端代码介绍    ③:前端vue3安装并调用后端方法    ④:聊天室样例整体流程:1、进入网站->调用连接SignalR的方法2、与好友发送消息->调用SignalR的自定义方法 前端通过,signalR内置方法.invoke()  去请求接口3、监听接受方法(渲染消息)通过new signalR.HubConnectionBuilder().on

  9. ruby-on-rails - 使用用户或管理员模型和 Basecamp 样式子域设计登录 - 2

    我为Devise用户和管理员提供了不同的模型。我也在使用Basecamp风格的子域。除了我需要能够以用户或管理员身份进行身份验证的一些Controller和操作外,一切都运行良好。目前我有authenticate_user!在我的application_controller.rb中设置,对于那些只有管理员才能访问的Controller和操作,我使用skip_before_filter跳过它。不幸的是,我不能简单地指定每个Controller的身份验证要求,因为我仍然需要一些Controller和操作才能被用户或管理员访问。我尝试了一些方法都无济于事。看来,如果我移动authentica

  10. ruby - svn ruby​​ 绑定(bind)是否作为 gem 提供? - 2

    我看到有几十个与svn相关的gem,但是我在其中任何一个上找到的少量文档表明它们是命令行包装器和杂项帮助程序。(svn命令、svn钩子(Hook)等)我在野外看到过执行以下操作的代码:require'svn/core'和SVN.Repos.add(...),但该模块的作者通过apt-get提取了他的svnruby​​工具。这对我来说不是一个选择,因为我正在开发一个windows/osx工具。Thispage列出了一些项目,但特别是,我需要一些可以访问svn+ssh存储库的东西,而且我没有时间花一半的时间来挖掘文档-十几个项目,试图引导每一个。我在寻找哪个gem?从那里开始,我很乐意挖掘

随机推荐