理清class和style绑定

本文详细介绍了Vue.js中样式绑定的四种方式,包括数组、三元表达式、对象及样式对象绑定,阐述了如何根据不同条件动态应用多个class或样式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

绑定class的使用情况
首先定义好class样式,
第一种:传递一个数组
:class="[‘active’,‘thin’]"相当于class=“active thin”

第二种:在数组中使用三元表达式(符合条件时添加该样式)
:class="[‘thin’,‘italic’,flag?‘active’:’’]"

第三种对象代替三元表达式 (二三都需要在data中定义flag时true/false):class="[‘thin’,‘italic’,{‘active’:flag}]"

第四种绑定对象,而对象的属性可带引号也可不带引号
:class=“classObj”
data:{classObj:{red:true, thin:true, italic:false,active:false }}

※何时使用它:一般定义多个class或者不同条件时显示不同class
把class写在data内的一个名字,通过绑定此名调用class数组

绑定style
1.直接在元素上通过:style书写样式对象
:style="{color:“red”,font-size:“40px”}"

2.将样式对象,定义到data中,并直接引用到:style中
data:{
styleObj1:{color:“red”,font-size:“40px”}
}

3.在:style通过数组,引用多个data上的样式对象
data:{
styleObj1:{color:“red”,font-size:“40px”},
styleObj2:{font-weight:bold}
}

反正就是一句话:将样式对象,定义到data中,并直接引用到:style中,还可引用多个data上的样式对象,就要用style,条件样式就是:class

<template> <view class="content"> <!-- <image class="logo" src="/static/logo.png"></image> --> <!-- view class="text-area"> <text class="title">{{title}}</text> </view> <view class="text-area"> <text class="title">{{title}}</text> </view> <view class="text-area"> <button @click="handleclick">呼叫服务器</button> </view> --> <unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" collection="datalist"> <view v-if="error">{{error.message}}</view> <view v-else> <uni-list> <uni-list-item v-for="item in data" :key="item._id" :title="item.name" :note="item.phone" @click="rmItem(item._id)" link></uni-list-item> </uni-list> </view> </unicloud-db> </view> </template> <script setup> // import { ref } from 'vue' // const udb = ref("") const rmItem = ()=>{ rmItem(id){ this.$refs.udb.remove(id) } } // export default { // data(){ // return{ // } // }, // methods:{ // rmItem(id){ // this.$refs.udb.remove(id) // } // } // } // import { // reactive, // ref // } from 'vue'; // const title = ref("hello-mycloud") // const handleclick = async () => { // const myfunction = uniCloud.importObject("myfunction") // const res = await myfunction.say("你好,我是前端") // uni.showModal({ // content: JSON.stringify((res) // ) // }) // } </script> <style> /* .content { display: flex; flex-direction: column; align-items: center; justify-content: center; } .logo { height: 200rpx; width: 200rpx; margin-top: 200rpx; margin-left: auto; margin-right: auto; margin-bottom: 50rpx; } .text-area { display: flex; justify-content: center; } .title { font-size: 36rpx; color: #8f8f94; } */ </style>这段代码想要实现点击当前项可以删除内容,但是功能失效,是为什么
03-11
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值