【vue3】06. 跟着官网学习vue3

每日鸡汤：星光不问赶路人，时光不负有心人

前言

一、class绑定

1.支持对象、数组、字符串

前言

本篇文章整理【class与style绑定】

语法没难度，依旧是整理一些常用的场景，和一些知识的扩展。

一、class绑定

1.支持对象、数组、字符串

这个没什么难度，等我遇到值得总结的会补充进来，先忽略。

二、style绑定

1. 直接绑定object类型的字段

如果我们在写一个简单组件的时候，style的变量很少，比如只有宽、高，我们一般这样写就可以了：


<template>
    <div :style="{width: '100px', height: '100px'}">hellodiv>
template>

但是如果，我们有很多个需要绑定的值，比如fontSize、color、backgroundColor等，这样写就一长串，很麻烦，看起来也很乱：


<template>
    <div :style="{width: '100px', 
                height: '100px', fontSize: '20px', color: 'red',
                backgroundColor: 'blue'}">hellodiv>
template>

所以我们可以直接绑定一个object对象在模版中，这个对象的具体值在js中设置


<template>
    <div :style="myStyle">hellodiv>
template>
<script setup>
 
const myStyle = ref({
     height: '100px',
     fontSize: '20px',
     color: 'red',
     backgroundColor: 'blue'
})