Vue的class、style绑定

本自具足反求诸己

于 2023-11-15 15:34:59 发布

阅读量171

点赞数

分类专栏： 2022技术栈系列文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/seacean2000/article/details/134421536

版权

Vue中的样式也要回到原始的BOM+DOM+js的前端组合去解读。

1、当模板直接引用style中定义的样式时，在HTML模板中按照正常的样式引用处理即可。

模板定义：

<template>
<div class="sizeclass">100</div>
</template>

<style>
.sizeclass {
  text-align: center;
  font-size: large;
}
</style>

2、当需要根据响应式状态改变模板中引用的class、style时，需要利用计算属性改变样式的引用

既然可以动态改变class，那么HTML模板中style属性也是可以动态改变的。都是HTML的属性，style和class没有什么区别，顶多是style要以对象的形式，class以字符串的方式存在。

<script setup lang="ts">

import {computed, nextTick, ref} from "vue"

const count=ref(0);
const list=ref(["a","b","c"]);
list.value[1]="e";

function increment(){
  count.value++;
  nextTick();
  if(count.value>=3){
    list.value[count.value]="add";
  }
}

//computed attribute
const size=comput