目录

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

本文是转载文章,点击查看原文
如有侵权,请联系 xyy@jishuzhan.net 删除
相关推荐
可缺不可滥9 分钟前
微前端 无界wujie
前端·微前端·无界·wujie
巴巴博一36 分钟前
前端安全之DOMPurify基础使用
前端·vue.js·安全·typescript·html5
纸上的彩虹1 小时前
AI干不掉程序员,但却能让一个程序员干两个程序员的活儿~
前端·github copilot·ai 编程
SunshineBrother1 小时前
iOS项目,shell脚本,从大到小打印图片占用内存大小
前端
二川bro1 小时前
前端内存优化实战指南:从内存泄漏到性能巅峰
前端
疏狂难除1 小时前
基于SeaORM+MySQL+Tauri2+Vite+React等的CRUD交互项目
前端·react.js·前端框架
onejason1 小时前
如何使用PHP爬虫获取Shopee(虾皮)商品详情?
java·前端
赵大仁1 小时前
深入解析前后端分离架构:原理、实践与最佳方案
前端·架构
学不动学不明白1 小时前
PC端项目兼容手机端
前端
无名之逆1 小时前
Hyperlane:轻量、高效、安全的 Rust Web 框架新选择
开发语言·前端·后端·安全·rust·github·ssl