Vue3 | Vue中的诸多花样样式写法 以及 相关规则和技巧

最新推荐文章于 2023-08-07 18:00:00 发布
最新推荐文章于 2023-08-07 18:00:00 发布
阅读量1.5k 收藏 1
点赞数
文章标签： vue html js 小程序 react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aaLiweipeng/article/details/113977774
版权

完整原文地址见简书https://www.jianshu.com/p/cdbd2670e075

本文内容提要

  • Class样式写法

    • 常规的样式使用写法
    • 使用v-bind的形式动态设定DOM组件样式
    • 使用v-bind + Object的形式组织样式 绑定DOM组件；
    • 使用v-bind + 数组的形式组织样式 绑定DOM组件
    • 数组形式中混合Object形式的；

  • 子组件样式 默认跟随 父组件

    • 子组件自己配置样式，则不跟随根组件，按子组件自己的样式渲染
    • 拥有“两个以上最外层组件”的样式处理
      • 解决办法1，外层组件 各自配置样式；
      • 解决办法2，使用:class="$attrs.class"对外层组件进行配置，
        使得统一跟随引用处样式配置；

  • 行内样式写法

    • 常规写法
    • Vue式写法，使用v-bind配合data
    • Object形式描述样式，可读性更高
Class样式写法

常规的样式使用写法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World! heheheheheheda</title>
    <style>
        .blue {
            color: blue;  
        }
        .green {
            color: green;
        }
    </style>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="heheApp"></div>
</body>
  <script>
    const app = Vue.createApp({
        template: `
        <div class = "blue">luelueluelielielie</div>`
    });
    const vm = app.mount('#heheApp');
  </script>
</html>

效果：

使用v-bind的形式动态设定DOM组件样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World! heheheheheheda</title>
    <style>
        .blue {
            color: blue;  
        }
        .green {
            color: green;
        }
    </style>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="heheApp"></div>
</body>
  <script>
    const app = Vue.createApp({
        data() {
            return {
                colorString:'blue',
            }
        },
        template: `
        <div :class = "colorString">luelueluelielielie</div>`
    });
    const vm = app.mount('#heheApp');
  </script>
</html>
改变data字段可以动态改变组件颜色：

使用Object的形式组织样式 绑定DOM组件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World! heheheheheheda</title>
    <style>
        .blue {
            color: blue;  
        }
        .green {
            color: green;
        }
    </style>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="heheApp"></div>
</body>
  <script>
    const app = Vue.createApp({
        data() {
            return {
                colorObject: {blue:true, green:true}
            }
        },
        template: `
        <div :class = "colorObject">luelueluelielielie</div>`
    });
    const vm = app.mount('#heheApp');
  </script>
</html>

关键代码：

data() {
            return {
                colorObject: {blue:true, green:true}
            }
        },

如果将颜色键值设置成false，则网页DOM组件便不会展示：

<script>
    const app = Vue.createApp({
        data() {
            return {
                colorObject: {blue:true, green:false}
            }
        },
        template: `
        <div :class = "colorObject">luelueluelielielie</div>`
    });
    const vm = app.mount('#heheApp');
  </script>

使用数组的形式组织样式 绑定DOM组件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World! heheheheheheda</title>
    <style>
        .blue {
            color: blue;  
        }
        .green {
            color: green;
        }
        .orange {
            color: orange;
        }
        .yellow {
            color: yellow;
        }
    </style>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="heheApp"></div>
</body>
  <script>
    const app = Vue.createApp({
        data() {
            return {
                colorArray: ['blue', 'green', 'orange', 'yellow']
            }
        },
        template: `
        <div :class = "colorArray">luelueluelielielie</div>`
    });
    const vm = app.mount('#heheApp');
  </script>
</html>

数组形式中混合Object形式的：

<script>
    const app = Vue.createApp({
        data() {
            return {
                colorArray: ['blue', 'green', {orange:false, yellow:true}]
            }
        },
        template: `
        <div :class = "colorArray">luelueluelielielie</div>`
    });
    const vm = app.mount('#heheApp');
  </script>
子组件样式 默认跟随 父组件

例程：
添加子组件testDom到根组件，子组件样式没有配置，则默认跟随根组件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World! heheheheheheda</title>
    <style>
        .blue {
            color: blue;  
        }
        .green {
            color: green;
        }
        .orange {
            color: orange;
        }
    </style>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="heheApp"></div>
</body>
  <script>
    const app = Vue.createApp({
        data() {
            return {
                colorArray: ['blue', 'green', {orange:true}]
            }
        },
        template: `
        <div :class = "colorArray">
            luelueluelielielie
            <testDom/>
        </div>`
    });

    app.component('testDom', {
        template: `
            <div>heheda</div>`
    });

    const vm = app.mount('#heheApp');
  </script>
</html>

子组件自己配置样式，则不跟随根组件，按子组件自己的样式渲染：

<script>
    const app = Vue.createApp({
        data() {
            return {
                colorArray: ['blue', 'green', {orange:true}]
            }
        },
        template: `
        <div :class = "colorArray">
            luelueluelielielie
            <testDom/>
        </div>`
    });

    app.component('testDom', {
        template: `
            <div class='blue'>heheda</div>`
    });

    const vm = app.mount('#heheApp');
  </script>
拥有“两个以上最外层组件”的样式处理

不过当添加的子组件的template中，最外层有两个以上的组件的时候，
在引用子组件处(如下代码中的<testDom class='green'/>)配置样式是没有作用，
子组件template下的组件 会沿用根组件的样式(如下代码中的<div :class = "colorArray">)，
因为引用处<testDom class='green'/>配置的样式 或者其他属性，
指代的是testDom组件的最外层组件的样式 或者其他属性，
但是此时最外层组件有两个，
于是这个样式class='green'配置不知道该分配给哪个最外层组件，便失效：

<script>
    const app = Vue.createApp({
        data() {
            return {
                colorArray: ['blue', 'green', {orange:true}]
            }
        },
        template: `
        <div :class = "colorArray">
            luelueluelielielie
            <testDom class='green'/>
        </div>`
    });

    app.component('testDom', {
        template: `
            <div>heheda</div>
            <div>heheda</div>
            `
    });

    const vm = app.mount('#heheApp');
  </script>

解决办法1，各自配置样式：

<script>
    const app = Vue.createApp({
        data() {
            return {
                colorArray: ['blue', 'green', {orange:true}]
            }
        },
        template: `
        <div :class = "colorArray">
            luelueluelielielie
            <testDom/>
        </div>`
    });

    app.component('testDom', {
        template: `
            <div class='blue'>heheda</div>
            <div class='green'>heheda</div>
            `
    });

    const vm = app.mount('#heheApp');
  </script>

解决办法2，使用:class="$attrs.class"对外层组件进行配置，
将自定义子组件 template下的组件 的样式，
跟随 子组件添加处(如下代码中的<testDom class='green'/>)配置的样式：

<script>
    const app = Vue.createApp({
        data() {
            return {
                colorArray: ['blue', 'green', {orange:true}]
            }
        },
        template: `
        <div :class = "colorArray">
            luelueluelielielie
            <testDom class='blue'/>
        </div>`
    });

    app.component('testDom', {
        template: `
            <div :class="$attrs.class">heheda</div>
            <div :class="$attrs.class">heheda</div>
            `
    });

    const vm = app.mount('#heheApp');
  </script>
行内样式写法

常规写法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World! heheheheheheda</title>
    <style>
        .blue {
            color: blue;  
        }
        .green {
            color: green;
        }
        .orange {
            color: orange;
        }
    </style>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="heheApp"></div>
</body>
  <script>
    const app = Vue.createApp({
        template: `
        <div style="color:blue">
            luelueluelielielie
        </div>`
    });

    const vm = app.mount('#heheApp');
  </script>
</html>

Vue式写法，使用v-bind配合data，
老规矩，bind后接左边一个组件属性style，右边一个data字段styleString：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World! heheheheheheda</title>
    <style>
        .blue {
            color: blue;  
        }
        .green {
            color: green;
        }
        .orange {
            color: orange;
        }
    </style>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="heheApp"></div>
</body>
  <script>
    const app = Vue.createApp({
        data() {
            return {
                styleString:'color:blue;'
            }
        },
        template: `
        <div :style="styleString">
            luelueluelielielie
        </div>`
    });

    const vm = app.mount('#heheApp');
  </script>
</html>
Object形式描述样式

当然以上是string方式描述样式的方式，
更多时候我们使用Object的形式描述样式，可读性更高
如下例程，styleString和styleObject两个字段，
分别代表以上两种描述方式，相形见绌：

<script>
    const app = Vue.createApp({
        data() {
            return {
                styleString:'color:blue; background: orange',
                styleObject: {
                    color: 'blue',
                    background:'orange'
                }
            }
        },
        template: `
        <div :style="styleObject">
            luelueluelielielie
        </div>`
    });

    const vm = app.mount('#heheApp');
  </script>
凌川江雪
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
vue3.x中使用cesium，vue3.x+Cesium
05-04
在vue3.x版本中使用cesium，基于vue-cli创建项目，手动配置webpack，资源已配置好，下载完 进入项目下npm install 安装依赖后就可以运行了
vue2+iview+webpack 和vue3+vben+vite的技术对比的ppt
07-31
vue2+iview+webpack 和vue3+vben+vite的技术对比的ppt,用于解释为什么使用新技术和框架
vue3 antd table表格样式修改——使用rowClassName更改某行数据的样式
XSL_HR的博客
12-25 9384
利用ant design vue组件库内置的API属性（rowClassName）给table表格添加行样式。利用css的不可控操作，去除表格的斑马纹样式。
vue3项目使用样式穿透修改elementUI默认样式
小绵杨
03-12 6834
在css单文件中，我们在style标签中写组件的样式，可以看到，一般style标签都会带上一个scoped属性，这样可以实现及时不同组件选择器一样，但是样式互不干扰。看一个例子，我们在两个组件中都定义一个类，在对应的scope标签中设置不同的样式。可以看到，vue为我们在不同的组件中的标签上加上了一个。然后通过属性选择器，实现不同属性的标签样式互不干扰。css属性选择器的作用是：为带有特定属性的 HTML 元素设置样式这也是style标签scoped属性实现样式模块化的原理。
vue 3 第二十七章：样式（动态class、动态style）
to_the_Future的博客
05-26 8583
在 Vue 中，我们可以使用动态绑定语法来动态地添加类名或样式。本章将介绍 Vue 3 中如何使用动态绑定语法来动态地添加类名或样式。
vue 3 第二十六章：样式（scoped、深度选择器、全局选择器、css modules、自定义注入名称、css中v-bind）
to_the_Future的博客
05-25 3718
在 Vue 中，我们可以使用scoped特性来给组件的样式添加作用域。通过为组件的标签添加scoped特性，我们可以确保组件的样式仅应用于该组件的模板中，而不会影响其他组件或全局样式。
vue3 样式绑定 style绑定
duzhe17629085113的博客
12-09 1155
建议写法 对象直接量 行内样式：直接操作样式 ,只想操作每一个样式比如改变某一个字体颜色大小，背景颜色等等 样式表:是面对大型的页面进行设置
vue中书写行内的样式
最爱喝怡宝的博客
11-10 9987
<div id="app"> <!-- <h1 style="color: plum; font-size: 10px;">我是一个成熟的h1</h1> --> <!-- 第一种方法 --> <h1 :style="{color:'red',fontSize:'10px'}">我是一个成熟的h1</h1> <!-- 第二种方法 --> ..
vue3中router和store详细使用教程方法vuex和route.zip
04-24
vue3中router和store详细使用教程方法vuex和route
vue3中使用tinyMCE
07-01
vue3中使用tinyMCE的demo，setup语法糖写法，解压后请删除node_model包后重新cnpm i
vue 开发者工具devtools(谷歌浏览器插件)，包括vue2和vue3
01-08
vue开发者工具，谷歌浏览器插件。 支持vue2和vue3 1. vue2版本：5.3.4 2. vue3版本：6.0.0.18 beta 两个插件，需要分别安装，分别支持vue2和vue3
Vue3样式绑定
q709971076的博客
09-01 703
今天和大家分享关于Vue中的样式和class的绑定， 首先声明，这篇文章出现的class不是类声明的关键字，而是标签内部的属性，用于实现样式 在原生html中，我们给一个元素添加样式的时候，大概有这么两种方式 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&
Vue3浅谈：（三）Vue3类与样式绑定
samxiaoguai的博客
01-09 5051
一、Vue3Class 绑定 1.Vue3Class 绑定基础 绑定对象：绑定数组 二、Vue3 Style绑定 1.Vue3Style 绑定基础 绑定对象：绑定数组：自动前缀:样式多值:
Vue3的花样样式还不会？看看老前端是怎么玩儿的~
最新发布
小淼淼的博客
08-07 326
如果数组里的每个值都与最后一次的渲染相同，那么整个子树的更新将被跳过。最常见的场景就是全屏的模态框。理想情况下，触发模态框的按钮和模态框是在同一个组件中，他们一起被渲染在 DOM 结构里很深的地方。细心的兄弟会发现，以上选择器的风格是统一的，都是使用伪类的方式来实现。是一个内置组件，它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。状态改变，默认会重新创建大量的 vnode，尽管绝大部分都跟之前是一模一样的。的值可以是一个 CSS 选择器字符串，也可以是一个 DOM 元素对象。
Vue3 学习笔记 —— scoped、tailwind、unocss 原子化、Vue3 样式新特性
Lyrelion的博客
12-07 4416
Vue3 学习笔记 —— scoped、tailwind、unocss 原子化、Vue3 样式新特性
vue3和vue2 使用css变量的方法（附带scss的使用方式）
柑橘乌云_
05-06 6432
通过内联样式写css变量（可以调用js里面的变量），如何在style标签里面就可以使用css变量。这么写在 scss 是会编译报错的。建议写成第二种这种计算属性的方式，当值发生改变，也可以响应变化。直接在style标签里面使用v-bind绑定js里面的变量。会将双引号自动去掉，从而得到。，解决了编译失败的问题。
vue 行内样式写法总结
cx18333的博客
04-25 890
本文总结了,vue中行内样式常用写法
vue3---组件基础(上)保姆级篇
qq_61950936的博客
08-15 8383
关于 vue3 基础学习，前面两篇博客讲了单页面应用程序、vite 的基本使用。这期就来一篇多一点的吧！这期主要内容有：组件化开发思想、vue 组件的构成、组件的基本使用、封装组件的案例。看完这些，砸门也就详细了解什么是组件了。废话不多说，直接上刺刀！！组件化开发指的是：根据封装的思想，把页面上可重用的部分封装为组件，从而方便项目的开发和维护。ibootstrap - Bootstrap可视化布局系统所展示的效果，就契合了组件化开发的思想。.........
Vue3动态样式
Zong_0915的博客
02-07 3599
即你传入的整体一定是一个字符串。只不过它的内容体是一个三元表达式。添加好之后，我们点击加1按钮，看看会发生什么？
mapActions,在vue2和vue3中的写法一样吗？
06-06
在 Vue2 和 Vue3 中，`mapActions` 的写法是有一些不同的。 在 Vue2 中，`mapActions` 函数可以接受一个数组或对象作为参数，用于将 store 中的 actions 映射到组件中。下面是使用数组作为参数的示例： ```...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

凌川江雪

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值