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 相关文章推荐
jquery命令汇总,方便使用jquery的朋友
Jun 26 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
May 08 Javascript
JQuery页面地址处理插件jqURL详解
May 03 Javascript
js实现简易的单数字随机抽奖(0-9)
Mar 19 Javascript
每天一篇javascript学习小结(Date对象)
Nov 13 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
Oct 18 Javascript
深入理解JavaScript 参数按值传递
May 24 Javascript
input file样式修改以及图片预览删除功能详细概括(推荐)
Aug 17 Javascript
Vue组件之全局组件与局部组件的使用详解
Oct 09 Javascript
详解HTML5 使用video标签实现选择摄像头功能
Oct 25 Javascript
原生JS进行前后端同构
Apr 22 Javascript
轻松学习JavaScript函数中的 Rest 参数
May 30 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
ThinkPHP中I(),U(),$this-&gt;post()等函数用法
2014/11/22 PHP
Mac OS下配置PHP+MySql环境
2015/02/25 PHP
详解Laravel5.6 Passport实现Api接口认证
2018/07/27 PHP
基于jquery的关于动态创建DOM元素的问题
2010/12/24 Javascript
在js(jquery)中获得文本框焦点和失去焦点的方法
2012/12/04 Javascript
js实现局部页面打印预览原理及示例代码
2014/07/03 Javascript
jQuery构造函数init参数分析续
2015/05/13 Javascript
JS实现简单路由器功能的方法
2015/05/27 Javascript
JavaScript中标识符提升问题
2015/06/11 Javascript
深入剖析JavaScript编程中的对象概念
2015/10/21 Javascript
javascript实现label标签跳出循环操作
2016/03/06 Javascript
解析Vue2.0双向绑定实现原理
2017/02/23 Javascript
一步步教你利用Canvas对图片进行处理
2017/09/19 Javascript
Swiper自定义分页器使用详解
2017/12/28 Javascript
vue router 跳转时打开新页面的示例方法
2019/07/28 Javascript
JS的时间格式化和时间戳转换函数示例详解
2020/07/27 Javascript
Vue项目配置跨域访问和代理proxy设置方式
2020/09/08 Javascript
编写v-for循环的技巧汇总
2020/12/01 Javascript
python with statement 进行文件操作指南
2014/08/22 Python
用Python解析XML的几种常见方法的介绍
2015/04/09 Python
Python+django实现简单的文件上传
2016/08/17 Python
Django与JS交互的示例代码
2017/08/23 Python
python 遍历列表提取下标和值的实例
2018/12/25 Python
详解python编译器和解释器的区别
2019/06/24 Python
如何使用python代码操作git代码
2020/02/29 Python
Pycharm制作搞怪弹窗的实现代码
2021/02/19 Python
HTML5几个设计和修改的页面范例分享
2015/09/29 HTML / CSS
斯洛伐克电子产品购物网站:DATART
2020/04/05 全球购物
大学生工作推荐信范文
2013/12/02 职场文书
公务员总结性个人自我评价
2013/12/05 职场文书
企业门卫岗位职责
2013/12/12 职场文书
求职自荐信
2013/12/14 职场文书
会计专业大学生职业生涯规划范文
2014/01/11 职场文书
2014年小学植树节活动方案
2014/03/02 职场文书
MySQL高级进阶sql语句总结大全
2022/03/16 MySQL
python库Tsmoothie模块数据平滑化异常点抓取
2022/06/10 Python