[后端卷前端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
'

相关推荐
专注VB编程开发20年8 分钟前
rust语言-对象多级访问
服务器·前端·rust
徐_三岁18 分钟前
关于npm的钩子函数
前端·npm·node.js
代码小学僧19 分钟前
🎉 在 Tailwind 中愉快的使用 Antd Design 色彩
前端·css·react.js
ssshooter23 分钟前
复习 CSS Flex 和 Grid 布局
前端·css·html
_请输入用户名1 小时前
EventEmitter 是广播,Tapable 是流水线:聊聊它们的本质区别
前端·设计模式
爱学习的茄子1 小时前
React Fiber:让大型应用告别卡顿的性能革命
前端·react.js·面试
龙在天1 小时前
我是前端,我来总结一下前端 配 Nginx 的一些案例
前端
Thetimezipsby1 小时前
基于Taro4打造的一款最新版微信小程序、H5的多端开发简单模板
前端·javascript·微信小程序·typescript·html5·taro
掘金安东尼1 小时前
前端周刊430期(2025年9月1日–9月7日)
前端
BUG创建者1 小时前
uni 拍照上传拍视频上传以及相册
前端·javascript·音视频