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 相关文章推荐
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
Jan 05 Javascript
对 jQuery 中 data 方法的误解分析
Jun 18 Javascript
JavaScript原生对象之Date对象的属性和方法详解
Mar 13 Javascript
canvas绘制万花筒效果(代码分享)
Jan 20 Javascript
Axios学习笔记之使用方法教程
Jul 21 Javascript
深入理解vue.js中$watch的oldvalue与newValue
Aug 07 Javascript
vue2.0 父组件给子组件传递数据的方法
Jan 15 Javascript
30分钟快速实现小程序语音识别功能
Nov 27 Javascript
关于vue表单提交防双/多击的例子
Oct 31 Javascript
在Vue mounted方法中使用data变量详解
Nov 05 Javascript
vue中改变滚动条样式的方法
Mar 03 Javascript
javascript中导出与导入实现模块化管理教程
Dec 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实现阳历到农历转换的类实例
2015/03/07 PHP
PHP实现的进度条效果详解
2016/05/03 PHP
简单谈谈PHP中的trait
2017/02/25 PHP
Laravel中获取路由参数Route Parameters的五种方法示例
2017/09/29 PHP
PHP实现数据库的增删查改功能及完整代码
2018/04/18 PHP
使用jQuery.fn自定义jQuery翻页插件
2013/01/20 Javascript
js文本框输入点回车触发确定兼容IE、FF等
2013/11/19 Javascript
js data日期初始化的5种方法
2013/12/29 Javascript
easyui datagrid 键盘上下控制选中行示例
2014/03/31 Javascript
Javascript玩转继承(一)
2014/05/08 Javascript
js仿网易表单及时验证功能
2017/03/07 Javascript
js实现移动端编辑添加地址【模仿京东】
2017/04/28 Javascript
详解VUE中v-bind的基本用法
2017/07/13 Javascript
checkbox:click事件触发span元素内容改变的方法
2017/09/11 Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
2018/02/11 Javascript
layui问题之自动滚动二级iframe页面到指定位置的方法
2019/09/18 Javascript
Python2.6版本中实现字典推导 PEP 274(Dict Comprehensions)
2015/04/28 Python
解析Python中while true的使用
2015/10/13 Python
浅析Python的web.py框架中url的设定方法
2016/07/11 Python
Python基于pycrypto实现的AES加密和解密算法示例
2018/04/10 Python
Pandas读写CSV文件的方法示例
2019/03/27 Python
python中tkinter的应用:修改字体的实例讲解
2019/07/17 Python
Django框架之登录后自定义跳转页面的实现方法
2019/07/18 Python
python使用pip安装模块出现ReadTimeoutError: HTTPSConnectionPool的解决方法
2019/10/04 Python
django API 中接口的互相调用实例
2020/04/01 Python
python如何进行矩阵运算
2020/06/05 Python
python基于exchange函数发送邮件过程详解
2020/11/06 Python
OpenCV+python实现膨胀和腐蚀的示例
2020/12/21 Python
开普敦通行证:Cape Town Pass
2019/07/18 全球购物
不开辟用于交换数据的临时空间,如何完成字符串的逆序
2012/12/02 面试题
运动会解说词100字
2014/01/31 职场文书
给老婆的婚前保证书
2014/02/01 职场文书
《邮票齿孔的故事》教学反思
2014/02/22 职场文书
信息管理与信息系统专业求职信
2014/06/21 职场文书
大学生党员个人剖析材料
2014/10/08 职场文书
Windows 11要来了?微软文档揭示Win11太阳谷 / Win10有两个不同版本
2021/11/21 数码科技