[后端卷前端2]

绑定class

为什么需要样式绑定呢?

因为有些样式我们希望能够动态展示

看下面的例子:

html 复制代码
<template>
  <div>
    <p  :class="{'active':modifyFlag}">class样式绑定</p>
  </div>
</template>

<script>
    export default {
        name: "goodsTest",
        data() {
            return {
                modifyFlag: true,
                },
        }
    }
</script>

<style scoped>
.active{
  color: green;
  font-size: 20px;
}
</style>

绑定的时候可以绑定多个值:
<p :class="{'active':modifyFlag ,'view':viewFlag}">class样式绑定</p>

html 复制代码
<template>
  <div>
       <p  :class="{'active':modifyFlag ,'view':viewFlag}">class样式绑定</p>
  </div>
</template>

<script>
    export default {
        name: "goodsTest",
        data() {
            return {
                modifyFlag: true,
                viewFlag:true,
                            }
        },
        //计算属性
        computed: {
            viewTrueOrFalse() {
                return this.modifyFlag == true ? 'YES' : 'NO'
            }
        },

        methods: {
            
        }
    }
</script>

<style scoped>
.active{
  color: green;
}

  .view{
    font-size: 40px;
  }

</style>

对于多个对象的绑定,我们只需要将所需要要绑定的整合到一个对象之中即可:

例如:

'

多个对象的绑定
'

js 复制代码
 allBind:{
            active:true,
                    view:true
                },


....样式.....

<style scoped>
.active{
  color: green;
}

  .view{
    font-size: 40px;
  }

</style>

除了绑定对象跟对象的引用,还可以绑定数组:
<p :class="[arrayActive,arrayView]" >多个对象的绑定2</p>

html 复制代码
省略
data() {
            return {
                arrayActive:'active',
                arrayView:'view',
省略.....

可以使用三元运算符

<p :class="[arrayActive=='active'?'active':'']" >多个对象的绑定3</p>

在绑定时 数组跟对象嵌套时,只能对象嵌套在数组里面,而不能反过来;

<p :class="[arrayActive=='active'?'active':'',{'view':viewFlag}]" >多个对象的绑定4</p>

同理绑定Style时跟对象的用法一致

html 复制代码
    <p :style="{color:bindColor ,fontSize:fontSize }">绑定style</p>
    <p :style="bindStyle">绑定style2</p>
............................分割岛....................................
 
<script>
    export default {
        name: "goodsTest",
        data() {
            return {
                bindColor:'red',
                fontSize:'30px',
                 bindStyle:{
                    color:"red",
                     fontSize:"40px"
                 },
                 ....省略...

也可以绑定数组

`

绑定style3
'

相关推荐
立方世界7 分钟前
CSS水平垂直居中方法深度分析
前端·css
恋猫de小郭16 分钟前
Fluttercon EU 2025 :Let's go far with Flutter
android·前端·flutter
殇蓝21 分钟前
react-lottie动画组件封装
前端·react.js·前端框架
05Nuyoah26 分钟前
DAY 04 CSS文本,字体属性以及选择器
前端·css
一條狗27 分钟前
学习日报 20250928|React 中实现 “实时检测”:useEffect 依赖项触发机制详解
前端·react.js
Gazer_S30 分钟前
【React 状态管理深度解析:Object.is()、Hook 机制与 Vue 对比实践指南】
前端·react.js·前端框架
Nicholas6831 分钟前
flutter视频播放器video_player_avfoundation之AVFoundationVideoPlayer(三)
前端
Asort33 分钟前
JavaScript设计模式(六)——适配器模式 (Adapter)
前端·javascript·设计模式
是晓晓吖38 分钟前
Puppeteer page.on('response',fn)的最佳实践之等待响应
前端·puppeteer