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 相关文章推荐
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
Apr 27 Javascript
javascript时间自动刷新实现原理与步骤
Jan 06 Javascript
教你如何使用node.js制作代理服务器
Nov 26 Javascript
JS实现控制表格单元格垂直对齐的方法
Mar 30 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
Aug 05 Javascript
jquery的幻灯片图片切换效果代码分享
Sep 07 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
Oct 27 Javascript
JQuery EasyUI的一些常用组件
Jul 12 jQuery
详解Vue 事件修饰符capture 的使用
Dec 29 Javascript
node.js基础知识小结
Feb 26 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
Mar 04 Javascript
javascript实现滚动条效果
Mar 24 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
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
详解php与ethereum客户端交互
2018/04/28 PHP
使用vs code编辑调试php配置的方法
2019/01/29 PHP
PHP 枚举类型的管理与设计知识点总结
2020/02/13 PHP
一个刚完成的layout(拖动流畅,不受iframe影响)
2007/08/17 Javascript
JavaScript CSS 修改学习第四章 透明度设置
2010/02/19 Javascript
20条学习javascript的编程规范的建议
2014/11/28 Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
2015/03/28 Javascript
基于javascript实现图片预加载
2016/01/05 Javascript
SVG描边动画
2017/02/23 Javascript
完美实现js选项卡切换效果(二)
2017/03/08 Javascript
vuejs router history 配置到iis的方法
2018/09/20 Javascript
JS基于开关思想实现的数组去重功能【案例】
2019/02/18 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
2019/08/23 Javascript
vue移动端实现手机左右滑动入场动画
2020/06/17 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
2019/09/14 Javascript
微信小程序实现首页弹出广告
2020/12/03 Javascript
python动态加载变量示例分享
2014/02/17 Python
Python中Continue语句的用法的举例详解
2015/05/14 Python
python创建进程fork用法
2015/06/04 Python
Python如何实现文本转语音
2016/08/08 Python
对pandas的层次索引与取值的新方法详解
2018/11/06 Python
把JSON数据格式转换为Python的类对象方法详解(两种方法)
2019/06/04 Python
Django结合ajax进行页面实时更新的例子
2019/08/12 Python
Python requests上传文件实现步骤
2020/09/15 Python
CSS3中文字镂空、透明值、阴影效果设置示例小结
2016/03/07 HTML / CSS
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
2013/02/04 HTML / CSS
css3让div随鼠标移动而抖动起来
2014/02/10 HTML / CSS
Html5大文件断点续传实现方法
2015/12/05 HTML / CSS
HTML5 canvas实现移动端上传头像拖拽裁剪效果
2016/03/14 HTML / CSS
新农村建设典型材料
2014/05/31 职场文书
法制宣传标语集锦
2014/06/25 职场文书
党员自我评议个人对照检查材料
2014/09/16 职场文书
实习生辞职信范文
2015/03/02 职场文书
学习计划是什么
2019/04/30 职场文书
Pytorch 如何实现常用正则化
2021/05/27 Python