VUE中V-IF条件判断改变元素的样式操作


Posted in Javascript onAugust 09, 2020

方法一

v-if判断后用标签改变样式(特定显示列字体加粗)

<v-list dense>
 <template v-for="(col,i) in cols">
 <v-list-item :key="i" v-if="col.text=='商品码'||col.text=='通用名称'">
 <v-list-item-content><b>{{col.text}}</b></v-list-item-content>
 <v-list-item-content class="align-end mystyle"><b>{{item[col['value']]}}</b>
 </v-list-item-content>
 </v-list-item>
 <v-list-item :key="i" v-else>
 <v-list-item-content>{{col.text}}</v-list-item-content>
 <v-list-item-content class="align-end mystyle" >{{item[col['value']]}}
 </v-list-item-content>
 </v-list-item>
 </template>
</v-list>

方法二

通过类选择器改变样式

<v-list dense>
 <template v-for="(col,i) in cols">
 <v-list-item :key="i" v-if="col.text=='商品码'||col.text=='通用名称'">
 <v-list-item-content class="myfont">{{col.text}}</v-list-item-content>
 <v-list-item-content class="align-end mystyle myfont">{{item[col['value']]}}
 </v-list-item-content>
 </v-list-item>
 <v-list-item :key="i" v-else>
 <v-list-item-content>{{col.text}}</v-list-item-content>
 <v-list-item-content class="align-end mystyle" >{{item[col['value']]}}
 </v-list-item-content>
 </v-list-item>
 </template>
</v-list>
<style>
 .myfont{
 font-weight:bold;
 }
</style>
 }

效果

VUE中V-IF条件判断改变元素的样式操作

补充知识:vue引入iconfont阿里字体图标库以及报错解决

下载阿里的字体图标库文件,放在\src\assets\font文件夹下面。

安装style-loader,css-loader和file-loader (或url-loader) ,记得--save-dev

webpack的配置文件中添加:

{
test: /\.css$/,
use:['style-loader','css-loader']
},
{
test:/\.(ttf|eot|woff|woff2|svg)$/,
use:['file-loader']
}

入口文件main.js引入

import './assets/font/iconfont.css';

如果已经安装了插件,webpack配置文件里面也添加,还是报以下错误:

Unexpected character '@' (2:0)

You may need an appropriate loader to handle this file type.

@font-face {font-family: "iconfont";

src: url('iconfont.eot?t=1529419541319'); /* IE9*/

src: url('iconfont.eot?t=1529419541319#iefix') format('embedded-opentype'), /* IE6-IE8 */

建议检查仔细webpack配置文件是否有错误,比如逗号,括号等是否漏写。

然后重新运行项目npm run dev。

如果还是报错,试试将iconfont.css文件中的路径修改下,然后重新运行项目。

@font-face {font-family: "iconfont";
src: url('./iconfont.eot?t=1529419541319'); /* IE9*/
src: url('./iconfont.eot?t=1529419541319#iefix')

以上这篇VUE中V-IF条件判断改变元素的样式操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ajax 缓存 问题 requestheader
Aug 01 Javascript
js导航菜单(自写)简单大方
Mar 28 Javascript
JavaScript移除数组元素减少长度的方法
Sep 05 Javascript
js拖动div 当鼠标移动时整个div也相应的移动
Nov 21 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
Sep 20 Javascript
使用jquery提交form表单并自定义action的方法
May 25 Javascript
Bootstrap的Refresh Icon也spin起来
Jul 13 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
Jan 23 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
Feb 09 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
Oct 11 Javascript
vue实例中data使用return包裹的方法
Aug 27 Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
Aug 03 Javascript
Vue 样式切换及三元判断样式关联操作
Aug 09 #Javascript
VSCode Vue开发推荐插件和VSCode快捷键(小结)
Aug 08 #Javascript
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
Aug 08 #Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
Aug 08 #Javascript
JavaScript中变量提升和函数提升的详解
Aug 07 #Javascript
javascript中正则表达式语法详解
Aug 07 #Javascript
vue 子组件修改data或调用操作
Aug 07 #Javascript
You might like
一棵php的类树(支持无限分类)
2006/10/09 PHP
php简单复制文件的方法
2016/05/09 PHP
Laravel如何使用数据库事务及捕获事务失败后的异常详解
2017/10/23 PHP
PHP7内核之Reference详解
2019/03/14 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
使用jQuery+HttpHandler+xml模拟一个三级联动的例子
2011/08/09 Javascript
yepnope.js 异步加载资源文件
2011/09/08 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
2014/01/07 Javascript
JQuery 在线引用及测试引用是否成功
2014/06/24 Javascript
JavaScript数据类型之基本类型和引用类型的值
2015/04/01 Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
2016/01/26 Javascript
深入浅出讲解ES6的解构
2016/08/03 Javascript
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
2016/11/09 Javascript
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
2017/05/15 jQuery
微信小程序 slot踩坑的解决
2019/04/01 Javascript
JS实现从对象获取对象中单个键值的方法示例
2019/06/05 Javascript
[43:03]LGD vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
[01:54]TI珍贵瞬间系列(三):翻盘
2020/08/28 DOTA
[01:08:43]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第一场 1月9日
2021/03/11 DOTA
使用Python下载歌词并嵌入歌曲文件中的实现代码
2015/11/13 Python
基于Python中capitalize()与title()的区别详解
2017/12/09 Python
TensorFlow模型保存/载入的两种方法
2018/03/08 Python
python使用正则表达式来获取文件名的前缀方法
2018/10/21 Python
django基于cors解决跨域请求问题详解
2019/08/06 Python
django实现web接口 python3模拟Post请求方式
2019/11/19 Python
Python开发之pip安装及使用方法详解
2020/02/21 Python
python利用opencv保存、播放视频
2020/11/02 Python
优纳科技软件测试面试题
2012/05/15 面试题
客服部班长工作责任制
2014/02/25 职场文书
法人单位授权委托书范文
2014/10/06 职场文书
自我检讨报告
2015/01/28 职场文书
民事诉讼答辩状范文
2015/05/21 职场文书
海底两万里读书笔记
2015/06/26 职场文书
医院消毒隔离制度
2015/08/05 职场文书
2016公司中秋节寄语
2015/12/07 职场文书
HTML中的表格元素介绍
2022/02/28 HTML / CSS