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

相关推荐
zxhnext18 分钟前
LLM大语言模型入门
前端·后端
知心宝贝25 分钟前
写了那么久的前端,你真的了解浏览器背后的“小动作“吗?
前端·程序员·浏览器
wycode25 分钟前
Vue2实践(2)之用component做一个动态表单(一)
前端·javascript·vue.js
维李设论26 分钟前
前端智能化 | AG-UI实践及原理浅析
前端·aigc·agent
第七种黄昏27 分钟前
Vue3 中的 ref、模板引用和 defineExpose 详解
前端·javascript·vue.js
一只卡比兽27 分钟前
动态规划与贪心算法详解:原理、对比与代码实践
前端
aiwery31 分钟前
一文掌握 TypeScript 工具类型:Record、Partial、Omit、Pick 等实战用法
前端·代码规范
ankleless1 小时前
C语言(12)——进阶函数
前端·html
一条上岸小咸鱼1 小时前
Kotlin 基本数据类型(四):String
android·前端·kotlin
我是哈哈hh1 小时前
【Node.js】ECMAScript标准 以及 npm安装
开发语言·前端·javascript·node.js