vue3 class与style绑定 与 script setup使用

导读:本篇文章讲解 vue3 class与style绑定 与 script setup使用,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

vue3 class与style绑定

一、绑定class

  • v-bind:class 简写 : class
<template>
    <!--1种,普通语法-->
    <p class="activeStyle">1:放置字符串</p>

    <!--2种,对象语法,可多个,与普通共存-->
    <p v-bind:class="{ activeStyle: true }">2.1:直接使用</p>
    <p v-bind:class="classObj">2.2:存在data</p>

    <!--3种,数组语法-->
    <p v-bind:class="[{ activeStyle: true }]">3.1:直接使用</p>
    <p v-bind:class="[classObj]">3.2:存在data</p>
    <p v-bind:class="[isActive?classObj:'']">3.3:放表达式</p>
</template>

<script>
export default {
    data() {
        return {
            classObj: { activeStyle: true },
            isActive:true,
        }
    }
}
</script>

<style>
.activeStyle {
    font-size: 50px;
}
</style>

效果

在这里插入图片描述

一共有3种类型,基本,对象,数组

二、绑定style

<template>
    <!--1种,普通语法-->
    <p style="font-size:50px">1:放置字符串</p>

    <!--2种,对象语法,可多个,与普通共存-->
    <p v-bind:style="{ fontSize:'50px' }">2.1:直接使用</p>
    <p v-bind:style="classObj">2.2:存在data</p>

    <!--3种,数组语法-->
    <p v-bind:style="[{fontSize:'50px'}]">3.1:直接使用</p>
    <p v-bind:style="[classObj]">3.2:存在data</p>
    <p v-bind:style="[isActive ? classObj : '']">3.3:放表达式</p>
</template>

<script>
export default {
    data() {
        return {
            classObj: { fontSize:'50px' },
            isActive:true,
        }
    }
}
</script>

注意:
如css有-,则用大写,驼峰样式;如 font-size:50px => fontSize: ‘50px’
数组语法可放多个样式
与class对比,style没有 true与false选项

三、< script setup > 使用两者

class绑定

<template>
    <!--1种,普通语法-->
    <p class="activeStyle">1:放置字符串</p>

    <!--2种,对象语法,可多个,与普通共存-->
    <p v-bind:class="{ activeStyle: true }">2.1:直接使用</p>
    <p v-bind:class="classObj">2.2:存在data</p>

    <!--3种,数组语法-->
    <p v-bind:class="[{ activeStyle: true }]">3.1:直接使用</p>
    <p v-bind:class="[classObj]">3.2:存在data</p>
    <p v-bind:class="[isActive?classObj:'']">3.3:放表达式</p>
</template>

<script setup>
import { ref, reactive} from 'vue'
const classObj=reactive({activeStyle: true})
const isActive=ref(true)
</script>

<style>
.activeStyle {
    font-size: 50px;
}
</style>

对象用 reactive
单个用 ref

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之家整理,本文链接:https://www.bmabk.com/index.php/post/107046.html

(0)
小半的头像小半

相关推荐

极客之家——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!