vue根据值给予不同class的实例


Posted in Javascript onSeptember 29, 2018

如下所示:

<div class="chatBox-kuang" :class="addclass(skin)">
</div>
 
data(){
 return{
  skin:''
 }
}
onchooseSkin(attr){
 this.skin=attr
},

方法一

addclass(i){
 switch (i) {
  case 0:
   return 'skinA';
  case 1:
   return 'skinB';
  case 2:
   return 'skinC';
 }
}

方法二

addclass(i){
 var arr = ['skinA','skinB','skinC'];
 if(i==-1){
  return 'skinA'
 }else{
  return arr[i];
 }
}

以上这篇vue根据值给予不同class的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS远程获取网页源代码实例
Sep 05 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
Dec 01 Javascript
jQuery层级选择器用法分析
Feb 10 Javascript
js事件源window.event.srcElement兼容性写法(详解)
Nov 25 Javascript
jQuery html表格排序插件tablesorter使用方法详解
Feb 10 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
ES6新特性一: let和const命令详解
Apr 20 Javascript
angular指令笔记ng-options的使用方法
Sep 18 Javascript
Javascript实现运算符重载详解
Apr 07 Javascript
JS实现的合并多个数组去重算法示例
Apr 11 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
Jul 14 Javascript
JS实现简易日历效果
Jan 25 Javascript
vue实现重置表单信息为空的方法
Sep 29 #Javascript
Vue中的Props(不可变状态)
Sep 29 #Javascript
vue动态删除从数据库倒入列表的某一条方法
Sep 29 #Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
Sep 29 #Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
Sep 29 #Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
Sep 29 #Javascript
使用 Node.js 实现图片的动态裁切及算法实例代码详解
Sep 29 #Javascript
You might like
如何写php程序?
2006/12/08 PHP
php中ob(Output Buffer 输出缓冲)函数使用方法
2007/07/21 PHP
PHP与Java进行通信的实现方法
2013/10/21 PHP
jquery+php实现导出datatables插件数据到excel的方法
2015/07/06 PHP
php 开发中加密的几种方法总结
2017/03/22 PHP
详解php语言最牛掰的Laravel框架
2017/11/20 PHP
PHP实现新型冠状病毒疫情实时图的实例
2020/02/04 PHP
PHP7 错误处理机制修改
2021/03/09 PHP
用Javascript数组处理多个字符串的连接问题
2009/08/20 Javascript
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
2011/05/28 Javascript
JS案例分享之金额小写转大写
2014/05/15 Javascript
jQuery、layer实现弹出层的打开、关闭功能
2017/06/28 jQuery
使用Vue构建可重用的分页组件
2018/03/26 Javascript
JS实现的DOM插入节点操作示例
2018/04/04 Javascript
Vue2 轮播图slide组件实例代码
2018/05/31 Javascript
vue 使用html2canvas将DOM转化为图片的方法
2018/09/11 Javascript
使用Vue实现调用接口加载页面初始数据
2019/10/28 Javascript
基于JavaScript实现表格隔行换色
2020/05/08 Javascript
numpy排序与集合运算用法示例
2017/12/15 Python
Flask 让jsonify返回的json串支持中文显示的方法
2018/03/26 Python
Python判断有效的数独算法示例
2019/02/23 Python
python tornado修改log输出方式
2019/11/18 Python
Python求平面内点到直线距离的实现
2020/01/19 Python
Django 设置多环境配置文件载入问题
2020/02/25 Python
Python如何把十进制数转换成ip地址
2020/05/25 Python
Python 如何查找特定类型文件
2020/08/17 Python
Python中Qslider控件实操详解
2021/02/20 Python
EJB与JAVA BEAN的区别
2016/08/29 面试题
补充协议书范本
2014/04/23 职场文书
某集团股份有限公司委托书样本
2014/09/24 职场文书
校运动会广播稿300字
2014/10/07 职场文书
合同权益转让协议书模板
2014/11/18 职场文书
python实现A*寻路算法
2021/06/13 Python
Win11 S Mode版本泄露 正式上线后叫做Windows 11 SE
2021/11/21 数码科技
Windows下载并安装MySQL8.0.x 版本的完整教程
2022/04/10 MySQL
Python实现Matplotlib,Seaborn动态数据图
2022/05/06 Python