vue-:class的几种使用方式

1.方法方式

其实，一开始我想实现动态拼接的效果（

:class="['icon-level' + item.oppGrade.toLowerCase]"

）这样子，但是不行。于是，我用了计算属性，发现也不行，因为这个class需要参数支持，computed做不到。只能用方法了,而且用方法的时候，不能用[]把常量和方法写一起，我试过了的，写一起，常量的class会失效。方法实现方式如下：

1) HTML文件：<em class="dossc-icon-size" :class="oppGradeDoss(item.oppGrade)"></em>2) .VUE文件：methods: {oppGradeDoss(val){if(val){return "icon-level"+(val.toLowerCase())}}}3) .SCSS文件：
$icons-icon-list:icon-levela,icon-levelb,icon-levelc,icon-levelf,icon-levelh,icon-leveln,

还没写完，后续补充。。。

vue-:class的几种使用方式相关推荐

Vue组件的三种调用方式
最近在写fj-service-system的时候,遇到了一些问题.那就是我有些组件,比如Dialog.Message这样的组件,是引入三方组件库,比如element-ui这样的,还是自己实现一个?虽然 ...
uni-app / vue 全局变量的几种实现方式
公用模块定义一个专用的模块,用来组织和管理这些全局的变量,在需要的页面引入. (第一种方法)在 uni-app 项目根目录下创建 common 目录,然后在 common 目录下 utils 目录下 ...
js定义全局变量 vue页面_详解Vue.js 定义全局变量的几种实现方式
详解Vue.js 定义全局变量的几种实现方式发布于 2020-8-11| 复制链接本篇文章主要介绍了VUE 全局变量的几种实现方式,小妖觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小妖 ...
mysql几种安装方法_mysql的三种安装方式（详细）
安装MySQL的方式常见的有三种: rpm包形式通用二进制形式源码编译 1,rpm包形式 (1) 操作系统发行商提供的 (2) MySQL官方提供的(版本更新,修复了更多常见BUG)www.mys ...
[vue] vue的:class和:style有几种表示方式？
[vue] vue的:class和:style有几种表示方式? :class 绑定变量绑定对象绑定一个数组绑定三元表达式 :style 绑定变量绑定对象绑定函数返回值绑定三元表达式个人简 ...
vue暂存功能_vue路由缓存的几种实现方式小结
本文实例讲述了vue路由缓存的几种实现方式.分享给大家供大家参考,具体如下: 在我们的日常开发中,有时候会遇到页面的缓存,特别是电商的项目,在商品列表的一些状态都是要缓存下来的. 下面就简单介绍几种 ...
vue.js三种安装方式
Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易于上手 ...
CSS+JS+Vue：单行、多行文本溢出显示省略号...的几种实现方式
背景:近期H5项目有个UI需求,单行文本超长时,超出的部分...省略且有一个查看的图标:否则正常展示. 在此背景下了总结下文本溢出的几种实现方式. 1.单行文本溢出[纯css] 效果: <!-- ...
vue引入css三种方式
vue引入css三种方式 1.在对应.vue文件的中引入 <script> import "@/assets/css/reset.css" </script> ...
vue父子组件的三种传值方式
vue父子组件的三种传值方式函数类型的props传值 //父组件 <template><Children :getChildName="getChildName" ...

vue-:class的几种使用方式

vue-:class的几种使用方式相关推荐

最新文章

热门文章