Vue核心绑定样式条件渲染

最新推荐文章于 2024-08-20 22:06:04 发布

KiCCZha

最新推荐文章于 2024-08-20 22:06:04 发布

阅读量134

点赞数 7

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/KiCCZha/article/details/137690386

版权

本文介绍了JavaScript中如何通过字符串、数组和对象方式动态绑定CSS类样式，以及条件渲染指令v-if、v-else和v-show的区别与使用场景。

摘要由CSDN通过智能技术生成

1.绑定样式

class样式

写法：class=“xxx”，xxx可以是字符串，数组，对象
：style=“[a,b]"其中a，b是样式对象
：style=”{fontsize：xxx}"其中xxx是动态值
字符串写法适用于：类名不确定，要动态获取
数组写法适用于：要绑定多个样式，个数不确定，名字也不确定
对象写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用


<style>

.basic {width: 300px; height: 50px ;border: 1px solid black;}

.happy {border: 3px solid red;background-color: rgba(255, 255, 0, 0.644);background: linear-gradient(3odeg, yellow, pink, orange, yellow);}

.sad {border: 4px dashed rgb(2, 197, 2);background-color: skyblue;}.normal {background-color: #bfa;}

. atguigu1 {background-color: yellowgreen;}

. atguigu2 {font-size: 20px;text-shadow: 2px 2px 10px red;}

. atguigu3 {border-radius: 20px;}

</style>

<div id="root">

<!-- 绑定class样式--字符串写法，适用于:样式的类名不确定，需要动态指定- ->

<div class="basic" :class="mood" @click=" changeMood" >{ {name}}</div><br/><br/>

<!-- 绑定class样式- -数组写法，适用于:要绑定的样式个数不确定、名字也不确定-- ><div class="basic" :class="classArr" >{{name}}</div><br/><br/>

<!-- 绑定class样式--对象写法，适用于:要绑定的样式个数确定、名字也确定，但要动态决定用不用<div class="basic" :class="classObj">{{name}}</div><br/><br/>

<!-- 绑定style样式--对象写法-->

<div class="basic" :style=" styleobj">{{name}}</div><br/><br/>

<!-- 绑定style样式- -数组写法-->

<div class="basic" :style="styleArr">{{name}}</div></div>