vue表单中动态控制样式的几种方式

news/2024/7/10 1:33:27 标签: vue, js

1.三木运算:

<div :class="item.isTrue ? 'className1' : 'className2'"></div>

<style>
.className1{
....
}
.className2{
....
}
</style>

2.变量控制

<div :class="{className: item.isTrue"></div>

<style scoped lang="">
.className >>> .el-upload--picture-card{
....
}
</style>

3.使用Jquery

npm安装jQuery命令:npm i jquery -s

import $ from 'jquery' //全局安装,单页面引入

mounted () {
  setTimeout(() => {
     let forms = $('.el-form') //获取'.el-form'class类名数组合集
     forms.each((e, i) => { // 循环找到对应的'.star'class类名(prependTo)插入到'label'class类名前面.show()展示
       $(i).find('.star').prependTo($(i).find('label')).show()
     });
   }, 800)
},

http://www.niftyadmin.cn/n/1845212.html

相关文章

vue+ elment UI全局配置加载中状态

项目中多处会使用到一些共用的状态样式&#xff0c;这里简单写一个全局暴露的loading。 首先在项目共用文件夹common下定义一个loading.js文件&#xff1a; // loading.js import { Loading } from element-ui;let loadingCount 0; let loading;const startLoading () > …

git生成SSH公钥

cd ~/.sshgit config --global user.name "用户名"git config --global user.email "注册的Email123.com"ssh-keygen -t rsa -C "注册的Email123.com接下来回车三次(遇到Overwrite (y/n)?就 y回车)cat ~/.ssh/id_rsa.pub

ChinaVis2019可视化会议——非正式开始篇

2019-07-21&#xff0c;由中国计算机图形图像学会作为主办方的ChinaVis可视化会议正式开始前的一天进行的上下午的两侧课程&#xff0c;让我受益匪浅。 上午官方通知为9&#xff1a;00开始签到&#xff0c;但是在8&#xff1a;00左右已经陆陆续续有人开始签到。我和婷姐两人吃…

在HTML中识别 字符串 里的 “\ n” 并成功换行显示

在结果所在的 div 的 css 设置&#xff1a;(注&#xff1a;只在当前string字符串内有效) white-space: pre-line;如&#xff1a; 但是此方案没法像下边这样换行&#xff1a; 要实现如下图所示效果&#xff1a; 在结果所在的 div 的 css 设置display属性中带有换行效果的属性值…

Python打包程序为.exe可执行文件

Python打包程序为.exe可执行文件 使用pip3安装pyinstaller。安装好之后可以在python安装目录下找到script&#xff08;脚本&#xff09;文件夹&#xff0c;如果其中存在“pyinstaller.exe”&#xff0c;说明安装成功。【如果由于pip版本太低&#xff0c;下载不了该模块&#x…

JS-字符串截取方法slice、substring、substr的区别

一、使用 slice() 截取 1&#xff0c;函数说明 slice() 方法可通过指定的开始和结束位置&#xff0c;提取字符串的某个部分&#xff0c;并以新的字符串返回被提取的部分。语法如下&#xff1a; stringObject.slice(start, end)参数说明&#xff1a; start&#xff08;必需&a…

elementui 更改 el-table 表头样式及修改el-table表格边框的注意事项

初衷 element ui官方封装好的 el-table 组件&#xff0c; 好用是挺好用的&#xff0c;但不可避免的是默认的样式并不一定能满足实际开发过程中的需要&#xff0c;那就自己动用五姑娘吧。 入坑 一是参考官方文档里面 el-table 的 header-cell-style 和 cell-style 属性进行修…

使用python制作窗体应用

使用python制作窗体应用【二】 打开Qtdesigner,该软件主要用于制作UI界面&#xff0c;如果使用过C#语言进行窗体应用开发的同学肯定会知道&#xff0c;C#的窗体界面无需代码&#xff0c;仅需拖拉拽即可&#xff0c;即所谓的所见即所得&#xff0c;Qtdesigner也是如此。Qt的使用…