Vue3样式绑定

文章目录

  • Vue3样式绑定
    • 1. class 属性绑定
      • 1.1 v-bind:class 设置一个对象，从而动态的切换 class
      • 1.2 在对象中传入更多属性用来动态切换多个 class
      • 1.3 直接绑定数据里的一个对象
      • 1.4 绑定一个返回对象的计算属性。这是一个常用且强大的模式
      • 1. 5 数据语法
      • 1.6 errorClass 是始终存在的，isActive 为 true 时添加 activeClass 类
    • 2. Vue.js style(内联样式)
      • 2.1 v-bind:style 直接设置样式
      • 2.2 直接绑定到一个样式对象
      • 2.3 v-bind:style 可以使用数组将多个样式对象应用到一个元素上
      • 2.4 多重值
    • 3. 组件上使用 class 属性
      • 3.1 带有单个根元素的自定义组件上使用 class 属性
      • 3.2 组件有多个根元素

Vue3样式绑定

1. class 属性绑定

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

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

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

1.1 v-bind:class 设置一个对象，从而动态的切换 class

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

    <!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例  v-bind:class 设置一个对象，从而动态的切换 class </title><script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script>
<!--    定义样式--><style>.active {width: 100px;height: 100px;background: green;}</style>
</head>
<body><!--定义一个名为app的div--><div id="app" class="demo">
<!--        使用v-bind:class 在div中使用class属性 -->
<!--        <div v-bind:class="{'active': isActive}"></div>-->
<!--        v-bind:class可以缩写为 :class --><div :class="{'active': isActive}"></div>
<!--        静态绑定class-->
<!--        <div class="active"></div>--></div><script>
//    定义Vue应用HelloVueAppconst HelloVueApp = {data () {return {// isActive为false则不显示isActive: true}}}//     创建HelloVueApp应用 并挂载到名为app的div上Vue.createApp(HelloVueApp).mount('#app')</script>
</body>
</html>

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

  • 以上实例 div class 渲染结果为：

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

    在这里插入图片描述

1.2 在对象中传入更多属性用来动态切换多个 class

  • :class 指令也可以与普通的 class 属性共存

  • 实例：text-danger 类背景颜色覆盖了 active 类的背景色：

    <!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例 在对象中传入更多属性用来动态切换多个 class:class 指令也可以与普通的 class 属性共存</title><script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script>
<!--    定义样式--><style>.active {background: green;}.static {width: 100px;height: 100px;}.text-danger {background: red;}</style>
</head>
<body><!--定义一个名为app的div--><div id="app" class="demo">
<!--        使用v-bind:class 在div中使用class属性 -->
<!--        <div v-bind:class="{'active': isActive}"></div>-->
<!--        v-bind:class可以缩写为 :class --><div :class="{'active': isActive, 'text-danger': hasError}" class="static"></div>
<!--        静态绑定class-->
<!--        <div class="active"></div>--></div><script>
//    定义Vue应用HelloVueAppconst HelloVueApp = {data () {return {// isActive为false则不显示isActive: false,hasError: true}}}//     创建HelloVueApp应用 并挂载到名为app的div上Vue.createApp(HelloVueApp).mount('#app')</script>
</body>
</html>

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

  • 以上实例 div class 渲染结果为：

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

    在这里插入图片描述

  • 当 isActive 或者 hasError 变化时，class 属性值也将相应地更新。例如，如果 active 的值为 true，class 列表将变为 "static active text-danger"。
    在这里插入图片描述

1.3 直接绑定数据里的一个对象

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

    <!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例 在对象中传入更多属性用来动态切换多个 class:class 指令也可以与普通的 class 属性共存 直接绑定数据里的一个对象</title><script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script><script src="https://unpkg.com/vue@next"></script>
<!--    定义样式--><style>.active {background: green;}.static {width: 100px;height: 100px;}.text-danger {background: red;}</style>
</head>
<body><!--定义一个名为app的div--><div id="app" class="demo">
<!--        使用v-bind:class 在div中使用class属性 -->
<!--        <div v-bind:class="{'active': isActive}"></div>-->
<!--        直接绑定对象 v-bind:class可以缩写为 :class --><div :class="classObject" class="static"></div>
<!--        静态绑定class-->
<!--        <div class="active"></div>--></div><script>
//    定义Vue应用HelloVueAppconst HelloVueApp = {data () {return {//     返回类型为一个对象classObject: {// isActive为false则不显示// isActive: true,'active': false,'text-danger': true}}}}//     创建HelloVueApp应用 并挂载到名为app的div上Vue.createApp(HelloVueApp).mount('#app')</script>
</body>
</html>

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

  • 以上实例 div class 渲染结果为：

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

    在这里插入图片描述

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

在这里插入图片描述

1.4 绑定一个返回对象的计算属性。这是一个常用且强大的模式

  • 也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式：

    <!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例 在对象中传入更多属性用来动态切换多个 class:class 指令也可以与普通的 class 属性共存 绑定一个返回对象的计算属性。这是一个常用且强大的模式</title><script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script><script src="https://unpkg.com/vue@next"></script>
<!--    定义样式--><style>.active {background: green;}.static {width: 100px;height: 100px;}.text-danger {background: red;}</style>
</head>
<body><!--定义一个名为app的div--><div id="app" class="demo">
<!--        使用v-bind:class 在div中使用class属性 -->
<!--        <div v-bind:class="{'active': isActive}"></div>-->
<!--        直接绑定对象 v-bind:class可以缩写为 :class --><div :class="classObject" class="static"></div>
<!--        静态绑定class-->
<!--        <div class="active"></div>--></div><script>
//    定义Vue应用HelloVueAppconst HelloVueApp = {data () {return {//     定义返回值isActive: true,error: null}},//     定义计算属性 为一个对象computed: {classObject () {// 定义对象返回值return {active: this.isActive && !this.error,'text-danger': this.error && this.error.type === 'fatal'}}}}//     创建HelloVueApp应用 并挂载到名为app的div上Vue.createApp(HelloVueApp).mount('#app')</script>
</body>
</html>

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

  • 以上代码的渲染结果为：

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

    在这里插入图片描述

1. 5 数据语法

  • 可以把一个数组传给 v-bind:class，实例如下:

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

    <!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例 在对象中传入更多属性用来动态切换多个 class:class 指令也可以与普通的 class 属性共存 可以把一个数组传给 v-bind:class </title><script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script><script src="https://unpkg.com/vue@next"></script>
<!--    定义样式--><style>.active {background: green;}.static {width: 100px;height: 100px;}.text-danger {background: red;}</style>
</head>
<body><!--定义一个名为app的div--><div id="app" class="demo">
<!--        使用v-bind:class 在div中使用class属性 -->
<!--        <div v-bind:class="{'active': isActive}"></div>-->
<!--        直接绑定对象 v-bind:class可以缩写为 :class --><div :class="[activeClass, errorClass]" class="static"></div>
<!--        静态绑定class-->
<!--        <div class="active"></div>--></div><script>
//    定义Vue应用HelloVueAppconst HelloVueApp = {data () {return {//     定义返回值activeClass: 'active',errorClass: 'text-danger'}}}//     创建HelloVueApp应用 并挂载到名为app的div上Vue.createApp(HelloVueApp).mount('#app')</script>
</body>
</html>

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

  • 以上代码渲染结果：<div class="active text-danger static"></div>

    在这里插入图片描述

1.6 errorClass 是始终存在的，isActive 为 true 时添加 activeClass 类

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例 在对象中传入更多属性用来动态切换多个 class:class 指令也可以与普通的 class 属性共存errorClass 是始终存在的，isActive 为 true 时添加 activeClass 类 </title><script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script><script src="https://unpkg.com/vue@next"></script>
<!--    定义样式--><style>.active {background: green;}.static {width: 100px;height: 100px;}.text-danger {background: red;}</style>
</head>
<body><!--定义一个名为app的div--><div id="app" class="demo">
<!--        使用v-bind:class 在div中使用class属性 -->
<!--        <div v-bind:class="{'active': isActive}"></div>-->
<!--        直接绑定对象 v-bind:class可以缩写为 :class --><div :class="[isActive ? activeClass : errorClass]" class="static"></div>
<!--        静态绑定class-->
<!--        <div class="active"></div>--></div><script>
//    定义Vue应用HelloVueAppconst HelloVueApp = {data () {return {//     定义返回值isActive: true,activeClass: 'active',errorClass: 'text-danger'}}}//     创建HelloVueApp应用 并挂载到名为app的div上Vue.createApp(HelloVueApp).mount('#app')</script>
</body>
</html>

页面效果：isActive为true显示绿色，isActive为false显示红色
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • 以上实例的渲染结果:<div class="active static"></div>

    在这里插入图片描述

2. Vue.js style(内联样式)

2.1 v-bind:style 直接设置样式

  • 可以在 v-bind:style 直接设置样式，可以简写为 :style
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例  v-bind:style 直接设置样式 </title><script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script>
</head>
<body><!--定义一个名为app的div--><div id="app" class="demo">
<!--        v-bind:style 直接设置样式 -->
<!--        <div v-bind:style="{color: activeColor, fontSize: fontSize + 'px'}">v-bind:style 直接设置样式</div>-->
<!--        v-bind:style 直接设置样式 可以简写为 :style--><div :style="{color: activeColor, fontSize: fontSize + 'px'}">v-bind:style 直接设置样式</div></div><script>
//    定义Vue应用HelloVueAppconst HelloVueApp = {data () {return {activeColor: 'red',fontSize: 30}}}//     创建HelloVueApp应用 并挂载到名为app的div上Vue.createApp(HelloVueApp).mount('#app')</script>
</body>
</html>

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

  • 以上代码渲染结果为:<div style="color: red; font-size: 30px;">v-bind:style 直接设置样式</div>

    在这里插入图片描述

2.2 直接绑定到一个样式对象

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

    <!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例  v-bind:style 直接设置样式 </title><script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script>
</head>
<body><!--定义一个名为app的div--><div id="app" class="demo">
<!--        v-bind:style 直接设置样式 -->
<!--        <div v-bind:style="{color: activeColor, fontSize: fontSize + 'px'}">v-bind:style 直接设置样式</div>-->
<!--        v-bind:style 直接设置样式 可以简写为 :style--><div :style="styleObject">v-bind:style 绑定样式对象</div></div><script>
//    定义Vue应用HelloVueAppconst HelloVueApp = {data () {return {//     设置返回结果为一个样式对象styleObject: {color: "red",fontSize: "30px"}}}}//     创建HelloVueApp应用 并挂载到名为app的div上Vue.createApp(HelloVueApp).mount('#app')</script>
</body>
</html>

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

  • 以上代码的渲染结果：<div style="color: red; font-size: 30px;">v-bind:style 绑定样式对象</div>
    在这里插入图片描述

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

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

    <!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例  v-bind:style 可以使用数组将多个样式对象应用到一个元素上 </title><script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script>
</head>
<body><!--定义一个名为app的div--><div id="app" class="demo">
<!--        v-bind:style 直接设置样式 -->
<!--        <div v-bind:style="{color: activeColor, fontSize: fontSize + 'px'}">v-bind:style 直接设置样式</div>-->
<!--        v-bind:style 直接设置样式 可以简写为 :style--><div :style="[baseStyles, overridingStyle]">v-bind:style 绑定样式对象</div></div><script>
//    定义Vue应用HelloVueAppconst HelloVueApp = {data () {return {//     设置返回结果为一个样式对象baseStyles: {color: "green",fontSize: "30px"},overridingStyle: {'font-weight': 'bold'}}}}//     创建HelloVueApp应用 并挂载到名为app的div上Vue.createApp(HelloVueApp).mount('#app')</script>
</body>
</html>

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

    在这里插入图片描述

  • 上述案例渲染结果：<div style="color: green; font-size: 30px; font-weight: bold;">v-bind:style 绑定样式对象</div>

    在这里插入图片描述

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

2.4 多重值

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

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

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

3. 组件上使用 class 属性

3.1 带有单个根元素的自定义组件上使用 class 属性

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

    <!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例  当你在带有单个根元素的自定义组件上使用 class 属性时，这些 class 将被添加到该元素中。此元素上的现有 class 将不会被覆盖。 </title><script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script><script src="https://unpkg.com/vue@next"></script>
</head>
<body><!--定义一个名为app的div--><div id="app" class="demo">
<!--        使用自定义的全局组件runoob--><runoob class="classC classD"></runoob></div><script>
//    定义Vue应用HelloVueAppconst HelloVueApp = Vue.createApp({})//     在HelloVueApp组件上创建一个新全局组件
// 在自定义组件上使用class属性，这些属性会被添加到该元素上HelloVueApp.component('runoob', {template: '<h1 class="classA classB">在自定义组件上使用class属性，这些属性会被添加到该元素上</h1>'})//     创建HelloVueApp应用 并挂载到名为app的div上HelloVueApp.mount('#app')</script>
</body>
</html>

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

    在这里插入图片描述
    以上实例渲染结果：<h1 class="classA classB classC classD">在自定义组件上使用class属性，这些属性会被添加到该元素上</h1>
    在这里插入图片描述

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

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

  • 当 isActive 为 true 时，HTML 将被渲染成为：

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

3.2 组件有多个根元素

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

    template 中 ` 是反引号，不是单引号 ’

    <!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例  组件有多个根元素，你需要定义哪些部分将接收这个类。可以使用 $attrs 组件属性执行此操作 </title><script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script><script src="https://unpkg.com/vue@next"></script>
</head>
<body><!--定义一个名为app的div--><div id="app" class="demo">
<!--        使用自定义的全局组件runoob--><runoob class="classA"></runoob></div><script>
//    定义Vue应用HelloVueAppconst HelloVueApp = Vue.createApp({})//     在HelloVueApp组件上创建一个新全局组件 含多个根元素HelloVueApp.component('runoob', {template: `<p :class="$attrs.class">组件有多个根元素 使用 $attrs 组件属性执行此操作</p><span>这是runoob的子组件</span>`})//     创建HelloVueApp应用 并挂载到名为app的div上HelloVueApp.mount('#app')</script>
</body>
</html>

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

  • 以上代码渲染结果：

    <p class="classA">组件有多个根元素 使用 $attrs 组件属性执行此操作</p>
<span>这是runoob的子组件</span>

    在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/108235.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

设计模式之模板模式

设计模式之模板模式

文章目录 豆浆制作问题模板方法模式基本介绍模板方法模式原理类图对原理类图的说明-即(模板方法模式的角色及职责)模板方法模式解决豆浆制作问题模板方法模式的钩子方法模板方法模式的注意事项和细节 豆浆制作问题 编写制作豆浆的程序&#xff0c;说明如下: 制作豆浆的流程 选…
阅读更多...
誉天在线项目~ElementPlus Tag标签用法

誉天在线项目~ElementPlus Tag标签用法

效果图 页面展现 <el-form-item label"课程标签"><el-tagv-for"tag in dynamicTags":key"tag"class"mx-1"closable:disable-transitions"false"close"handleClose(tag)"style"margin:5px;">…
阅读更多...
的修大数据管理平台有哪些功能模块？它可以为企业带来什么好处？

的修大数据管理平台有哪些功能模块？它可以为企业带来什么好处？

的修大数据管理平台的功能比较强大&#xff0c;它提供了报修、维修、巡检、能耗、智识库、管线智慧云等应用场景服务&#xff0c;同时还可以为企业提供维保进度追踪、员工考核、服务流程管控、设备资产管理等一站式解决方案。平台通过多渠道报修、“一站式”投诉建议服务、企业…
阅读更多...
CocosCreator3.8研究笔记（八）CocosCreator 节点和组件的使用

CocosCreator3.8研究笔记（八）CocosCreator 节点和组件的使用

我们知道&#xff0c;在CocosCreator 节点和组件的修改有两种方法&#xff1a; 属性检查器中的设置脚本中的动态修改 脚本中动态修改&#xff0c;能实现各种各样的游戏逻辑&#xff0c;例如响应玩家输入&#xff0c;删除、修改、销毁节点或组件。 不过想要实现这些游戏逻辑&a…
阅读更多...
spring boot-Resolved element must not contain multiple elements 警告

spring boot-Resolved element must not contain multiple elements 警告

首先强调一下&#xff0c;此问题不影响程序运行。 报错信息&#xff1a; package org.springframework.util; ...public abstract class Assert ...public static void state(boolean expression, String message) {if (!expression) {throw new IllegalStateException(messa…
阅读更多...
Transformers-Bert家族系列算法汇总

Transformers-Bert家族系列算法汇总

&#x1f917; Transformers 提供 API 和工具&#xff0c;可轻松下载和训练最先进的预训练模型。使用预训练模型可以降低计算成本、碳足迹&#xff0c;并节省从头开始训练模型所需的时间和资源。这些模型支持不同形式的常见任务&#xff0c;例如&#xff1a; &#x1f4dd; 自…
阅读更多...
特斯拉Dojo超算：AI训练平台的自动驾驶与通用人工智能之关键

特斯拉Dojo超算：AI训练平台的自动驾驶与通用人工智能之关键

特斯拉公开Dojo超算架构细节&#xff0c;AI训练算力平台成为其自动驾驶与通用人工智能布局的关键一环 在近日举行的Hot Chips 34会议上&#xff0c;特斯拉披露了其自主研发的AI超算Dojo的详细信息。Dojo是一个可定制的超级计算机&#xff0c;从芯片到系统全部由特斯拉自主设计…
阅读更多...
本地MQTT服务器搭建（EMQX）

本地MQTT服务器搭建（EMQX）

一、下载EMQX 下载地址&#xff1a;EMQ (emqx.com) 打开官网后&#xff0c;选择右边的免费试用按钮 然后单击EMQX Enterprise标签&#xff0c;然后选择下面的EMQX开源版&#xff0c;选择开源版的系统平台为Windows&#xff0c;单击免费下载。 在新页面下单击立即下载 二、安装…
阅读更多...
SQL注入 - 宽字节注入

SQL注入 - 宽字节注入

文章目录 SQL注入 - 宽字节注入宽字节注入前置知识宽字节靶场实战判断是否存在SQL注入判断位数判显错位判库名判表名判列名 SQL注入 - 宽字节注入 靶场 sqli - labs less-32 宽字节注入主要是绕过魔术引号的&#xff0c;数据库解析中除了UTF-8编码外的所有编码如&#xff1a;G…
阅读更多...
微分中值定理

微分中值定理

目录 费马定理 罗尔定理 拉格朗日中值定理 柯西中值定理 几个常用的泰勒公式 微分中值定理是微积分中的一个重要定理&#xff0c;它用于描述一个函数在某个区间内的平均变化率与该区间内某一点的瞬时变化率之间的关系。微分中值定理有两个主要形式&#xff1a;拉格朗日中值…
阅读更多...
阿里云-源码构建容器镜像

阿里云-源码构建容器镜像

1、阿里云Code代码平台 1.1 创建访问令牌。 登录云效Codeup控制台&#xff0c;单击右上角个人设置。 在个人设置页面&#xff0c;单击左侧导航栏中的个人访问令牌。 单击创建访问令牌&#xff0c;设置配置项&#xff0c;然后单击立即创建。以下为创建访问令牌需要授予的最小权…
阅读更多...
【C++进阶】：红黑树

【C++进阶】：红黑树

红黑树 一.红黑树简单实现1.性质二.更新颜色1.情况一2.情况二3.情况三 3.完整代码(代码有注释&#xff0c;稍微画图很容易理解,旋转部分可以看我的AVL树博客) 二.map和set1.基本实现2.迭代器 本篇的前置条件是AVL树的旋转和搜索树&#xff0c;如果不了解可以看看我的AVL树博客 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023