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

方法一

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引入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条件判断改变元素的样式操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue项目,代码提交至码云,iconfont的用法说明

    一.前期准备 首先得有一个码云账号,账号名最好是英文,用于线上仓库 其次下载一个git到电脑,因为很多git命令,cmd命令行识别不了 最好再有一个Iconfont账号,很多前端用到的图标就不用再自己画了,直接添加到项目下载下来就可以用了 还需要用到的有node 二.建立项目 1.首先在码云上新建一个私有的项目(如果项目是共有的,那么所有人都能看见,一般设为私有,然后将项目组的人拉进来就可以了),使用READERME文件初始化这个项目,语言选择javascript,克隆到本地 其中需要完成线上仓

  • 在Vue中使用icon 字体图标的方法

    1.使用线上的阿里iconfont图标库 1.打开 iconFont官网 选择自己喜欢的图标,并且添加购物车 2.点击购物车,添加至项目 3 生成链接 4在我们的vue项目中,找到index.html文件,引入css样式,记住这里要放上你的链接地址 5接下来我们就可以在任何组件地方使用我们的图标了,我这里就是用上面生成的三个图标其中的一个. 2但是考虑网络及用户体验 阿里iconfont下载本地使用 1 阿里iconfont图标直接下载到本地 2 在assets文件下创建iconfont文件夹

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

    方法一 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></

  • php中smarty模板条件判断用法实例

    本文实例讲述了php中smarty模板条件判断用法.分享给大家供大家参考.具体实现方法如下: 模板文件test6.html代码: <html> <head> <title>Smarty Test</title> </head> <body> <table width="200" border="0"> {if $cond == 1} <tr> <td>条件成立

  • 在VUE中实现文件下载并判断状态的方法

    新增JS页面 axiosExport.JS // Axios拦截请求并实现下载 import axios from 'axios' // download url export const downloadUrl = (url) => { console.log(url) let iframe = document.createElement('iframe') iframe.style.display = 'none' iframe.src = url iframe.onload = func

  • python实现在多维数组中挑选符合条件的全部元素

    问题产生:今天在编写神经网络的Cluster作业时,需要根据根据数据标签用不同的颜色画出数据的分布情况,由此学习到了这种高效的方法. 传统思路:用for循环来挑选符合条件的元素,这样十分浪费时间. 代码示例: from sklearn.datasets.samples_generator import make_blobs import numpy as np import matplotlib.pyplot as plt #product 20 samples and divide them

  • vue中v-for循环选中点击的元素并对该元素添加样式操作

    相信大家都会遇到这种情况:v-for循环时,我只需要点击到的元素做出相应反应,其他的元素不变:但是往往所有v-for循环出的元素都会变化.如下面的代码:我需要点击到的元素添加一个类样式,其他元素不变,但是这样会导致所有的元素都会变化 html: <div v-for = "(item,index) in items" :class = 'addclass:isactive' @click='onclick()'> <span>{{item.name}}</

  • vue 中的动态传参和query传参操作

    Vue router 如何传参 params.query 是什么? params:/router1/:id,这里的 id 叫做 params.例如/router1/123, /router1/789 query:/router1?id=123,这里的 id 叫做 query.例如/router1?id=456 query 方式传参和接收参数 传参: this.$router.push({ path:'/xxx' query:{ id:id } }) this.$router.push 传参时,

  • Vue 中使用lodash对事件进行防抖和节流操作

    有些浏览器事件可以在短时间内快速触发多次,比如调整窗口大小或向下滚动页面.例如,监听页面窗口滚动事件,并且用户持续快速地向下滚动页面,那么滚动事件可能在 3 秒内触发数千次,这可能会导致一些严重的性能问题. 如果在面试中讨论构建应用程序,出现滚动.窗口大小调整或按下键等事件请务必提及 防抖(Debouncing) 和 函数节流(Throttling)来提升页面速度和性能.这两兄弟的本质都是以闭包的形式存在.通过对事件对应的回调函数进行包裹.以自由变量的形式缓存时间信息,最后用 setTimeou

  • 在vue中通过render函数给子组件设置ref操作

    正常我们的写法是,这样ref不会生效,h是作用在渲染的时候的,而ref是渲染之后才创建的,因此在h函数中使用ref是无效的. render: (h, params) => { return h(expandRow, { ref:'child', props: { row: params.row } }) } 我们常见h函数的用法是: render: (h) => { return h(ele) } => 是es6的用法,相当于 (h) => {} 相当于 function(){},

  • vue中使用定义好的变量设置css样式详解

    vue中使用定义好的变量设置css样式详解

    目录 前言 实现 第一种情况 第二种情况 语法 方法一 方法二 总结 前言 在做项目的时候,通常会遇到需要在 HTML 标签上绑定变量来设置样式,对于这种需求,共有两种情况. 实现 第一种情况 如果是对于代码中实实在在存在的 HTML 标签,我们可以直接绑定变量来设置样式,比如改变表格的边框. 先设置一个表格边框样式的 JS 变量(table_border). 再在 HTML 标签的 style 属性上绑定该 JS 变量. <template> <div class="app-

  • 在vue中使用Echarts利用watch做动态数据渲染操作

    依旧直接上代码- 首先安装引入Echarts,我是直接把Echarts挂到VUE全局变量上了 //引入echarts import Vue from 'vue'; import echarts from 'echarts'; Vue.prototype.$echarts = echarts; <template> <div class="demo-container"> <div ref="chart_wrap" class="

随机推荐