vue 中对style、disable 等样式进行条件判断

简介: vue 中对style、disable 等样式进行条件判断

本文为博主原创,未经允许不得转载:

一 原生用法

style="width: 100%; margin-top: 20px" disabled

 

二  三元表达式

<a :style="{color:(index==0?arr.conFontColor:'#000')}" :href="con.subTitleHref" target="_self">{{con.subTitle}}</a>

或者:

<Button  type="text" size="small" @click="showEdit(row)" :style="row.status==0?'color:#2d8cf0':''" :disabled="row.status==1">修改</Button>

 

三 函数用法

<div :style="{ height: tableRowHeight(item) }" class="tableRowCox">
              {{ item.id ? item.id : "--" }}
  </div>

 

四 变量用法

<div :style="{ height:conFontHeight}"> {{ item.id ? item.id : "--" }} </div>

 

标签: Vue学习使用

目录
相关文章
|
6月前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
563 2
|
5月前
|
缓存 JavaScript
vue中的keep-alive问题(2)
vue中的keep-alive问题(2)
465 137
|
9月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
1013 0
|
8月前
|
人工智能 JSON JavaScript
VTJ.PRO 首发 MasterGo 设计智能识别引擎,秒级生成 Vue 代码
VTJ.PRO发布「AI MasterGo设计稿识别引擎」,成为全球首个支持解析MasterGo原生JSON文件并自动生成Vue组件的AI工具。通过双引擎架构,实现设计到代码全流程自动化,效率提升300%,助力企业降本增效,引领“设计即生产”新时代。
602 1
|
8月前
|
JavaScript 安全
在 Vue 中,如何在回调函数中正确使用 this?
在 Vue 中,如何在回调函数中正确使用 this?
415 0
|
前端开发 JavaScript
Vue.js中class与style的增强绑定
Vue.js中class与style的增强绑定
238 0
|
Web App开发 前端开发 JavaScript
|
前端开发 JavaScript
vue中class与style的绑定
数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是属性 ,我们可以用v-bind 处理它们:只需要计算出表达式最终的字符串。不过,字符串拼接麻烦又易错。因此,在 v-bind 用于 class 和 style 时, Vue.js 专门增强了它。
2043 0
|
JavaScript
Vue.js之Class 与 Style 绑定
数组语法: 我们可以把一个数组传给 v-bind:class ,以应用一个 class 列表: wo data: { activeClass: 'active', err...
865 0
|
9月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能