Vue基本使用 Class和Style

保卫萝卜+1

已于 2023-02-13 13:45:47 修改

阅读量91

点赞数

分类专栏： Vue3.0 面试总结文章标签： vue.js javascript 前端 html

于 2023-02-02 10:03:33 首次发布

本文链接：https://blog.csdn.net/weixin_48908498/article/details/128844919

版权

Vue3.0 面试总结专栏收录该内容

10 篇文章 0 订阅

订阅专栏

要点

使用动态属性
使用class

<p:class="{black:isBlack,yellow:isYellow}">使用class</p>

使用class数组

 <p:class="[black,yellow]">使用class 数组</p>

使用style

 <p:style="styleData">使用样式</p>

样式中的属性要使用驼峰式写法

styleData: {
fontSize: '40px', // 两个单词连接的话转换为驼峰式
color: 'red',
backgroundColor: '#ccc' // 两个单词连接的话转换为驼峰式
}

完整代码

<template>
    <div>
        <p :class="{ black: isBlack, yellow: isYellow }">使用 class</p>
        <p :class="[black, yellow]">使用 class （数组）</p>
        <p :style="styleData">使用 style</p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            isBlack: true,
            isYellow: true,

            black: 'black',
            yellow: 'yellow',

            styleData: {
                fontSize: '40px', // 两个单词连接的话转换为驼峰式
                color: 'red',
                backgroundColor: '#ccc' // 两个单词连接的话转换为驼峰式
            }
        }
    }
}
</script>

<style scoped>
    .black {
        background-color: #999;
    }
    .yellow {
        color: yellow;
    }
</style>

结果
在这里插入图片描述
实际项目中的应用

默认activeMenu为-1 默认样式为 activeMenuStyle
如果点击了别的页签样式变为 " ‘’ 和 activeMenuItem
源码

  <div
    :class="[activeMenu == -1 ? activeMenuStyle : '', activeMenuItem]"
    @click="menuClicked()"
  >
    已选 ({{ liked }})
  </div>


```html
data() {
	    return {
	      dragIndex: "",
	      activeMenu: -1,
	      activeMenuStyle: [
	        "activeMenuStyle",
	        "theme-main-bdr",
	        "theme-main-bg",
	        "light10",
	      ],
	      activeMenuItem: ["activeMenuItem", "theme-main-hover-bg", "light10"],
	}
}
<style lang="less" scoped>
.activeMenuStyle{
  border-left: 3px solid;
}
.activeMenuItem{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0 12px 20px;
}
.activeMenuItem:hover{
  cursor:pointer;
}
</style>