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 相关文章推荐
从JavaScript 到 JQuery (1)学习小结
Feb 12 Javascript
Jquey拖拽控件Draggable使用方法(asp.net环境)
Sep 28 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
Oct 28 Javascript
纯js实现动态时间显示
Sep 07 Javascript
vue iview组件表格 render函数的使用方法详解
Mar 15 Javascript
Vue内部渲染视图的方法
Sep 02 Javascript
js实现移动端tab切换时下划线滑动效果
Sep 08 Javascript
微信小程序实现分享商品海报功能
Sep 30 Javascript
bootstrap-paginator服务器端分页使用方法详解
Feb 13 Javascript
如何在vue 中引入使用jquery
Nov 10 jQuery
微信小程序之高德地图多点路线规划过程示例详解
Jan 18 Javascript
vue el-table实现递归嵌套的示例代码
Aug 14 Vue.js
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加密解密函数分享
2014/06/05 PHP
PHP支付系统设计与典型案例分享
2016/08/02 PHP
PHP实现文字写入图片功能
2019/02/18 PHP
SuperSlide2实现图片滚动特效
2014/06/20 Javascript
js面向对象之静态方法和静态属性实例分析
2015/01/10 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
2015/03/05 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
2016/05/12 Javascript
用js制作淘宝放大镜效果
2020/10/28 Javascript
js实现鼠标拖动功能
2017/03/20 Javascript
vue.js实现只弹一次弹框
2018/01/29 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
2018/03/08 Javascript
vue组件name的作用小结
2018/05/23 Javascript
OpenLayers3实现地图显示功能
2020/09/25 Javascript
vue打开新窗口并实现传参的图文实例
2021/03/04 Vue.js
[00:37]2016完美“圣”典风云人物:AMS宣传片
2016/12/06 DOTA
python实现挑选出来100以内的质数
2015/03/24 Python
wxpython实现图书管理系统
2018/03/12 Python
[原创]Python入门教程2. 字符串基本操作【运算、格式化输出、常用函数】
2018/10/29 Python
python3使用matplotlib绘制散点图
2019/03/19 Python
使用python快速在局域网内搭建http传输文件服务的方法
2019/11/14 Python
Python socket实现的文件下载器功能示例
2019/11/15 Python
python求前n个阶乘的和实例
2020/04/02 Python
Redbubble法国:由独立艺术家设计的独特产品
2019/01/08 全球购物
bonprix匈牙利:女士、男士和儿童服装
2019/07/19 全球购物
军训自我鉴定
2013/12/14 职场文书
六个一活动实施方案
2014/03/21 职场文书
保密承诺书
2014/03/27 职场文书
市场部经理岗位职责
2014/04/10 职场文书
中学生爱国演讲稿
2014/09/05 职场文书
12.4全国法制宣传日活动方案
2014/11/02 职场文书
2014年小学教导处工作总结
2014/12/19 职场文书
幼儿园推普周活动总结
2015/05/07 职场文书
公司人力资源管理制度
2015/08/05 职场文书
英语导游欢迎词
2015/09/30 职场文书
MySQL into_Mysql中replace与replace into用法案例详解
2021/09/14 MySQL
Anaconda安装pytorch和paddle的方法步骤
2022/04/03 Python