Vue3浅谈:(三)Vue3类与样式绑定

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

目录

一、Vue3 Class 绑定

1.Vue3 Class 绑定基础

绑定对象:

绑定数组

二、Vue3 Style 绑定

1.Vue3 Style  绑定基础

绑定对象:

绑定数组:

自动前缀 :

样式多值:


一、Vue3 Class 绑定

1.Vue3 Class 绑定基础

数据绑定的一个常见需求场景是操纵元素的 CSS class 列表和内联样式。我们可以使用 v-bind 将它们和动态的字符串绑定。除了字符串外,表达式的值也可以是对象或数组。

绑定对象:

如下:

<script setup lang="ts">
import { ref } from 'vue'

const isClassOne = ref(true)
</script>
<template>
  <div>
    <div :class="{ classOne: isClassOne }"></div>
  </div>
</template>
<style scoped></style>

页面最终渲染结果为:

<div class="classOne"></div>

上面的语法表示 classOne 是否存在取决于数据属性 isClassOne 的真假值。

我们可以在对象中写一个或多个字段来操作一个或多个 class。此外,:class 指令也可以和一般的 class 属性共存。

如下:

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

const isClassOne = ref(true);
const isClassTwo = ref(false);
</script>
<template>
  <div>
    <div :class="{ classOne: isClassOne, classTwo: isClassTwo }" class="static"></div>
  </div>
</template>
<style scoped></style>

页面最终渲染结果为:

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

注:isClassOne和isClassTwo值改变时,class 列表会随之更新

绑定的对象并非一定写成内联字面量的形式,亦可以直接绑定一个对象或者绑定一个返回对象的计算属性

如下:

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

const isClassOne = ref<boolean>(true);
const isClassTwo = ref<boolean>(false);
const oneClassObj = reactive({
  objOne: true,
  objTwo: true,
});
const classObject = computed(() => ({
  classOne: isClassOne.value == true,
  classTwo: isClassTwo.value == true,
}));
</script>
<template>
  <div>
    <div :class="{ classOne: isClassOne, classTwo: isClassTwo }" class="static"></div>
    <div :class="oneClassObj"></div>
    <div :class="classObject"></div>

  </div>
</template>
<style scoped></style>

页面最终渲染结果为:

<div class="classOne static"></div>
<div class="objOne objTwo"></div>
<div class="classOne"></div>

绑定数组

可以给 :class 绑定一个数组来渲染多个 CSS class
绑定的数组并非一定写成内联字面量的形式,亦可以直接绑定一个数组或者绑定一个返回数组的计算属性

如下:

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

const isClassOne = ref<string>("classOne");
const isClassTwo = ref<string>("classTwo");
const oneClassArr = reactive<Array<string>>(["classOneArr", "classTwoArr"]);
const classArr = computed<Array<string>>(() => {
  let oneArr = ["classOneArr", "classTwoArr"];
  return oneArr;
});
</script>
<template>
  <div>
    <div :class="[isClassOne, isClassTwo]"></div>
    <div :class="oneClassArr"></div>
    <div :class="classArr"></div>

  </div>
</template>
<style scoped></style>

页面最终渲染结果为:

<div class="classOne classTwo"></div>
<div class="classOneArr classTwoArr"></div>
<div class="classOneArr classTwoArr"></div>

如果数组中有条件地渲染某个 class,可以使用三元表达式或者在数组中嵌套对象。

如下:

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

const isClassOne = ref<boolean>(false);
</script>
<template>
  <div>
    <div :class="[isClassOne ? 'classOne' : '', 'classTwo']"></div>
    <div :class="[{ classOne: isClassOne }, 'classTwo']"></div>
  </div>
</template>
<style scoped></style>

页面最终渲染结果为:

<div class="classTwo"></div>
<div class="classTwo"></div>

classTwo 会一直存在,但 classOne 只会在 isClassOne 为真时才存在。 

二、Vue3 Style 绑定

1.Vue3 Style  绑定基础

绑定对象:

:style 支持绑定 JavaScript 对象值,对应的是HTML 元素的 style 属性

推荐使用 camelCase,但 :style 也支持 kebab-cased 形式的 CSS 属性 key (对应其 CSS 中的实际名称)

如下:

<script setup lang="ts">
import { ref } from "vue";
const oneColor = ref<string>("red");
const oneFontSize = ref<number>(30);
const oneBgc = ref<string>("yellow");
</script>
<template>
  <div>
    <div
      :style="{
        color: oneColor,
        fontSize: oneFontSize + 'px',
        'background-color': oneBgc,
      }"
    >
      123
    </div>
  </div>
</template>
<style scoped></style>

页面最终渲染结果为:

<div style="color: red; font-size: 30px; background-color: yellow;"> 123 </div>

除此外,亦可以直接绑定一个样式对象或返回样式对象的计算属性

绑定数组:

可以给 :style 绑定一个包含多个样式对象的数组。这些对象会被合并后渲染到同一元素上。

如下:

<script setup lang="ts">
import { reactive } from "vue";
const oneStyleObj = reactive({
  color: "red",
  fontSize: "30px",
});
const twoStyleObj = reactive({
  "background-color": "yellow",
});
</script>
<template>
  <div>
    <div :style="[oneStyleObj, twoStyleObj]">123</div>
  </div>
</template>
<style scoped></style>

页面最终渲染结果为:

<div style="color: red; font-size: 30px; background-color: yellow;"> 123 </div>

自动前缀 :

当在 :style 中使用了需要浏览器特殊前缀的 CSS 属性时,Vue 会自动为他们加上相应的前缀。Vue 是在运行时检查该属性是否支持在当前浏览器中使用。如果浏览器不支持某个属性,那么将尝试加上各个浏览器特殊前缀,以找到哪一个是被支持的。

样式多值:

可以对一个样式属性提供多个 (不同前缀的) 值

如下:

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

数组仅会渲染浏览器支持的最后一个值。在这个示例中,在支持不需要特别前缀的浏览器中都会渲染为 display: flex

有问题可以在下面评论,我会为大家解答,如果此文对大家有帮助,欢迎大家点点关注啊,博主在此感谢文章来源地址https://www.toymoban.com/news/detail-783972.html

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

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

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

相关文章

  • Vue教程(五):样式绑定——class和style

    样式提前准备 绑定class样式——字符串写法 适用于: 样式的类名不确定,需要动态指定 html: js: 效果: 绑定class样式——数组写法 适用于: 要绑定的样式个数不确定,名字也不确定 html: js 效果: 绑定class样式——对象写法 适用于: 要绑定的样式个数确定,名字也确定,

    2024年02月12日
    浏览(36)
  • 视频讲解vue2基础之style样式class类名绑定

    目录  style样式的动态绑定 class类名动态绑定 一:官方给出的写法 二:自创三元表达式写法  详细的视频讲解:002vue_样式的动态绑定_哔哩哔哩_bilibili 003vue_样式动态绑定(小案例)_哔哩哔哩_bilibili 详细的视频讲解:002vue_样式的动态绑定_哔哩哔哩_bilibili 003vue_样式动态绑定

    2023年04月15日
    浏览(48)
  • Vue3浅谈:(二)Vue3计算属性

    目录 一、Vue3计算属性 1.Vue3计算属性基础使用 2.计算属性缓存和常规方法 3.可写计算属性 当我们需要针对一些数据进行一些逻辑运算时可以使用模板中的表达式如下: 但是如果在模板中写太多逻辑,会让模板变得臃肿,难以维护。因此我们可以使用计算属性 computed()  方法来

    2023年04月25日
    浏览(32)
  • vue3探索——vue3+vite2动态绑定图片优雅解决方案

    优雅解决方案在最下面,小伙伴们儿可以直接前往 😊 在vue3+vite2项目中,我们有时候想要动态绑定资源,比如像下面的代码这样: 实际效果是这样: 我们注意到,控制台的报错信息 GET http://127.0.0.1:5173/1.jpg 404 (Not Found) GET :表示向服务器请求资源的方式。 http://127.0.0.1:5173

    2024年02月10日
    浏览(54)
  • Vue3-属性绑定、定时任务

    2024年02月07日
    浏览(41)
  • vue3组件之间双向绑定

    Vue3中组件的双向绑定统一使用 v-model 进行处理,并且可以和多个数据进行绑定,例如 v-model:foo、v-model:bar。 v-model 等价于 :model-value=\\\"someValue\\\" 和 @update:model-value=\\\"someValue = $event\\\" v-model:foo 等价于 :foo=\\\"someValue\\\" 和 @update:foo=\\\"someValue = $event\\\" 父子组件之间双向绑定 子组件可以结合 i

    2024年02月11日
    浏览(29)
  • vue父子组件之间双向数据绑定的(vue2/vue3)

    vue父子组件之间双向数据绑定的四种方法(vue2/vue3) vue考虑到组件的可维护性,是不允许子组件改变父组件传的props值的。父组件通过绑定属性的方式向子组件传值,而在子组件中可以通过$emit向父组件通信(第一种方式),通过这种间接的方式改变父组件的data,从而实现子组

    2024年02月08日
    浏览(71)
  • Vue3动态样式

    我们准备一个简单的 Vue3 项目,并写两个页面: Home : About 页面: 效果如下: 记得添加路由。添加好之后,我们点击加1按钮,看看会发生什么? 首先来看下我们做的事情: 我们定义了几个响应式数据,其中有个 colorRef ,它会根据 count 变量是奇数还是偶数来改变颜色。 我

    2024年02月02日
    浏览(38)
  • 浅谈Vue3——如何使用Push

    Vue.js是一个流行的JavaScript框架,用于构建用户界面。Vue 3是Vue.js的最新版本,它引入了许多新功能和改进,使得开发更加简单和高效。本文将介绍如何在Vue 3中使用 push 方法以及相应的代码示例。 在Vue 3中,\\\"push\\\"是一个数组方法,用于向数组的末尾添加一个或多个元素。它会

    2024年02月07日
    浏览(40)
  • vue3 动态(:src)绑定img图片

    webpack 创建的vue2可以通过 require对图片进行动态绑定 但vite创建的vue3则不可以通过require对图片进行动态绑定 可以通过一下方法进行绑定(注意vite根目录是 / ,且vite会自动解析src中的字符串)

    2024年02月13日
    浏览(41)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包