首页 > 其他分享 >Vue style 动态绑定

Vue style 动态绑定

时间:2024-09-11 11:16:57浏览次数:1  
标签:flex style Vue console log 绑定 param return rStyle

方法1:

<div class="flex peopleRygl-main-left-nr03 " :style="divStyleZdfw() ">

return{
	divStyle11: {
        color: 'red',
        fontSize: '14px',
        backgroundColor: 'yellow',
        alignItems: 'flex-start'
      }
}

 divStyleZdfw(param){
      console.log(new Date().toLocaleString())
      console.log(param)
      return this.divStyle11
    }

方法2:

<div class="flex peopleRygl-main-left-nr03 " :style="{ backgroundColor: 'yellow',alignItems:'flex-start' }">

方法3:

<div class="flex peopleRygl-main-left-nr03 " :style="{alignItems:divStyleZdfw(peopleForm) }">

    divStyleZdfw(param){
      // let rStyle = "{align-items: flex-start;}"
      // if(validatenull(param) || validatenull(param.zdfw)) return rStyle;
      // if(param.zdfw.length > 12) rStyle = "{align-items: flex-center;}"
      // return rStyle;
      console.log(new Date().toLocaleString())
      console.log(param)
      return "center"
    }

标签:flex,style,Vue,console,log,绑定,param,return,rStyle
From: https://www.cnblogs.com/linhan8888/p/18407881

相关文章

  • 【万字文档+PPT+源码】基于springboot+vue的研究生科研文档资料管理系统-可用于毕设-
    博主简介:......
  • springboot+vue校园流浪猫管理平台【程序+论文+开题】计算机毕业设计
    系统程序文件列表开题报告内容研究背景在现代化的大学校园中,流浪猫作为非人为饲养却常驻校园的特殊群体,它们不仅为师生们的生活增添了几分温馨与乐趣,也面临着生存环境的挑战与健康问题。随着校园内流浪猫数量的增加,如何有效管理、保护这些小生命,确保它们得到必要的关怀与救......
  • [JavaScript] 事件委托以及 Vue 列表循环事件绑定的性能优化
    前言事件委托(EventDelegation)是一种通过将事件监听器绑定到父元素,而不是直接绑定到每个子元素上的技术。这样可以减少事件监听器的数量,提升性能,并使得对动态添加或移除的元素更容易进行事件处理。事件冒泡和事件捕获事件冒泡:从里往外<divid="parent"style="padding:50px;......
  • springboot+vue学院电子政务系统【程序+论文+开题】计算机毕业设计
    系统程序文件列表开题报告内容研究背景随着信息技术的飞速发展,电子政务已成为提升政府及教育机构管理效率、优化服务流程、增强信息透明度的重要手段。学院作为培养未来社会栋梁的摇篮,其内部管理与服务水平的提升直接关系到教育质量与学生满意度。然而,传统的手工管理模式在......
  • Vue 生命周期与 TypeScript:深入理解组件生命周期
    Vue生命周期与TypeScript:深入理解组件生命周期引言Vue.js作为一种流行的前端框架,其组件生命周期是开发过程中不可或缺的一部分。理解并正确利用Vue的生命周期,可以帮助开发者构建更加健壮和可维护的应用。而当TypeScript与Vue结合使用时,这种优势得到了进一步的增强。Typ......
  • VUE - 局部引用Element-UI组件
    VUE-局部引用Element-UI组件1.安装插件npmielement-ui 2.全局安装在main.js中importVuefrom'vue'importAppfrom'./App.vue'importElementUIfrom"element-ui";import"element-ui/lib/theme-chalk/index.css";Vue.use(E......
  • 使用Vue3.5的onWatcherCleanup封装自动cancel的fetch函数
    前言在欧阳的上一篇这应该是全网最详细的Vue3.5版本解读文章中有不少同学对Vue3.5新增的onWatcherCleanup有点疑惑,这个新增的API好像和watchAPI回调的第三个参数onCleanup功能好像重复了。今天这篇文章来讲讲新增的onWatcherCleanup函数的使用场景:封装一个自动cancel的fetch函......
  • springboot+vue疫情防控物业信息采集系统【程序+论文+开题】计算机毕业设计
    系统程序文件列表开题报告内容研究背景随着全球疫情的持续影响,物业管理作为社区疫情防控的第一线,其重要性日益凸显。传统物业管理方式在面对疫情时,往往存在信息采集不全、效率低下、响应滞后等问题,难以有效支撑精准防控的需求。因此,开发一套高效、智能的疫情防控物业信息采......
  • springboot+vue有机农场客户关系管理系统的设计与实现【程序+论文+开题】计算机毕业设
    系统程序文件列表开题报告内容研究背景随着消费者对食品安全及健康饮食需求的日益增长,有机农场作为提供无污染、纯天然农产品的重要基地,其市场地位日益凸显。然而,传统农场管理模式在面对日益复杂的客户群体、多样化的需求及高效运营要求时显得力不从心。特别是在客户关系管......
  • springboot+vue学生公寓报修管理系统【程序+论文+开题】计算机毕业设计
    系统程序文件列表开题报告内容研究背景随着高校规模的不断扩大,学生公寓作为学生学习与生活的重要场所,其设施设备的维护与管理日益成为高校后勤服务的重要环节。传统的学生公寓报修方式往往依赖于纸质登记或口头报告,这种方式不仅效率低下,易导致信息丢失或延误处理,还难以对维......