Vue3动态样式

这篇具有很好参考价值的文章主要介绍了Vue3动态样式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一. Vue3动态样式

我们准备一个简单的Vue3项目,并写两个页面:Home

<template>
  <h1>Home</h1>
  <div>
    {{ number }}
    <button @click="add">1</button>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRef } from "vue";

const state = reactive({
  count: 1,
  color: "black",
});
const colorRef = toRef(state, "color");
const add = () => {
  state.count++;
  colorRef.value = state.count % 2 == 0 ? "blue" : "red";
};
</script>

<style scoped>
h1 {
  color: v-bind(colorRef);
}
</style>

About页面:

<template>
    <h1>About</h1>
</template>

效果如下:
Vue3动态样式

记得添加路由。添加好之后,我们点击加1按钮,看看会发生什么?
Vue3动态样式

首先来看下我们做的事情:

  1. 我们定义了几个响应式数据,其中有个colorRef,它会根据count变量是奇数还是偶数来改变颜色。
  2. 我们使用了v-bind()来讲这个响应式数据绑定在了h1标签上。

上面就包含了本文想说的几个点:

  1. 我们可以使用v-bind,方便的去将CSS样式和响应式数据进行绑定,响应式数据的值可以作为CSS样式来使用。
  2. 如果在style标签中,添加 scoped属性,代表当前这个样式的作用域仅仅在当前组件当中。我们可以看到对应的样式名称带着一定的前缀。
    Vue3动态样式

上述在style样式里面添加v-bind的写法还有第二种,就是直接将表达式赋值上去:

h1{
    color: v-bind('state.count % 2 == 0 ? "blue" : "red"');
}

但是这种方式需要注意,一定要在表达式的最外层增加引号。即你传入的整体一定是一个字符串。只不过它的内容体是一个三元表达式。文章来源地址https://www.toymoban.com/news/detail-434303.html

到了这里,关于Vue3动态样式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3 实现简单计数器示例——一个html文件展示vue3的效果

    目的 :作为一个新手开发,我想使用 Vue 3 将代码封装在 HTML 文件中时,进行界面打开展示。 学了一个简单计数器界面展示,代码如下: 在 上述HTML 文件里,包含了文件头标题 title , 接着定义了一个内容 div id=\\\"app\\\" 而后定义了一个内容,包含标题和数字,以及两个按钮的 templa

    2024年01月18日
    浏览(44)
  • 通过Vscode 简单创建一个vue3+element的项目

    确保你安装了最新版本的 Node.js,并且你的当前工作目录正是打算创建项目的目录。在命令行中运行以下命令 输入构建项目命令,个人推荐如果有cnpm使用cnpm 创建成功之后 完整引入 在 main.js 中写入以下内容: 以上代码便完成了 Element 的引入。需要注意的是,样式文件需要单

    2024年02月02日
    浏览(81)
  • 记录--Vue3基于Grid布局简单实现一个瀑布流组件

    在学习Grid布局之时,我发现其是CSS中的一种强大的布局方案,它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局,在刷某书和某宝首页时,我们发现其展示方式就是一种瀑布流,是一种流行的网站页面布局,视觉表现为参差不齐的多栏布局,随着页

    2024年02月05日
    浏览(66)
  • 01 vue3 开发准备

    https://cn.vuejs.org/ 1)安装 16.0 或更高版本的 Node.js 2)推荐IDE 配置是 Visual Studio Code + Volar 扩展插件(语法高亮)

    2024年02月16日
    浏览(33)
  • 初识Sringboot3+vue3环境准备

    目录 后端环境准备 环境准备-创建应用springboot3项目 环境准备-Maven IDEA配置本地maven 前端环境准备 依赖管理NPM安装配置 环境准备 下载JDK17https://www.oracle.com/java/technologies/downloads/#jdk17-windows     安装就下一步下一步,选择安装路径  配置环境 环境 JDK17+、IDEA2021+、maven3.5+、vsco

    2024年02月04日
    浏览(37)
  • Vue教程:如何使用Div标签实现单选框与多选框按钮以便我们随意调整样式

    前言: 在写Vue项目时,我们经常会用到单选框以及复选框,以往我们常用的是Element里面的单选框以及复选框,但是呢这里面的选框都不容易调整,假如我们需要不同的样式以及大小,就很难去实现想要的结果,本章教程就为大家讲解,如何使用div标签去实现单选,多选的这

    2024年01月18日
    浏览(35)
  • Vue3浅谈:(三)Vue3类与样式绑定

    目录 一、Vue3 Class 绑定 1.Vue3 Class 绑定基础 绑定对象: 绑定数组 二、Vue3 Style 绑定 1.Vue3 Style  绑定基础 绑定对象: 绑定数组: 自动前缀 : 样式多值: 数据绑定的一个常见需求场景是操纵元素的 CSS class 列表和内联样式。我们可以使用  v-bind  将它们和动态的字符串绑定

    2024年02月02日
    浏览(33)
  • vue3项目使用样式穿透修改elementUI默认样式

    在css单文件中,我们在style标签中写组件的样式,可以看到,一般style标签都会带上一个scoped属性,这样可以实现及时不同组件选择器一样,但是样式互不干扰。 看一个例子,我们在两个组件中都定义一个 hello-world-box 类,在对应的scope标签中设置不同的样式。 可以看到,vu

    2023年04月09日
    浏览(42)
  • vue3微信公众号商城项目实战系列(1)开发环境准备

    项目忙完,这次上新,写一个前端系列,采用vue3来开发一个微信公众号商城。 前言: 1. 微信公众号商城本质也是一个网站,由一个个网页组成,只不过这些网页运行在手机端,能响应手指的点击、长按、拖拽等操作。 2. 既然是网页,当然可以用3件套(js+html+css)来写,但象

    2023年04月14日
    浏览(100)
  • vue3-类与样式绑定

    Class 与 Style 绑定 class 和 style 都是 attribute,我们可以和其他 attribute 一样使用 v-bind 将它们和动态的字符串绑定。 Vue 专门为 class 和 style 的 v-bind 用法提供了特殊的功能增强。除了字符串外,表达式的值也可以是对象或数组。 绑定class :class (v-bind:class 的缩写) 传递一个对象来

    2024年01月19日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包