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 相关文章推荐
让innerHTML的脚本也可以运行起来
Jul 01 Javascript
javascript 数据类型转换(parseInt,parseFloat)
Jul 20 Javascript
js汉字转拼音实现代码
Feb 06 Javascript
jQuery可见性过滤器:hidden和:visibility用法实例
Jun 24 Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
Nov 13 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
Nov 23 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
Jun 05 Javascript
JavaScript仿百度图片浏览效果
Nov 23 Javascript
Node.js和Express简单入门介绍
Mar 24 Javascript
JS实现判断数组是否包含某个元素示例
May 24 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
Dec 11 Javascript
基于JavaScript实现大文件上传后端代码实例
Aug 18 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/10/09 PHP
编写Smarty插件在模板中直接加载数据的详细介绍
2013/06/26 PHP
php函数间的参数传递(值传递/引用传递)
2013/09/23 PHP
Linux(CentOS)下PHP扩展PDO编译安装的方法
2016/04/07 PHP
PHP XML和数组互相转换详解
2016/10/26 PHP
thinkPHP5.0框架命名空间详解
2017/03/18 PHP
PHP开启目录引索+fancyindex漂亮目录浏览带搜索功能
2019/09/23 PHP
laravel实现上传图片的两种方式小结
2019/10/12 PHP
js arguments.callee的应用代码
2009/05/07 Javascript
jquery URL参数判断,确定菜单样式
2010/05/31 Javascript
node.js 一个简单的页面输出实现代码
2012/03/07 Javascript
javascript-解决mongoose数据查询的异步操作
2016/12/22 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
2016/12/23 Javascript
关于webpack代码拆分的解析
2017/07/20 Javascript
微信小程序之页面跳转和参数传递的实现
2017/09/29 Javascript
js 将canvas生成图片保存,或直接保存一张图片的实现方法
2018/01/02 Javascript
jQuery使用动画队列自定义动画操作示例
2018/06/16 jQuery
Node.js Koa2使用JWT进行鉴权的方法示例
2018/08/17 Javascript
javascript json字符串到json对象转义问题
2019/01/22 Javascript
深度解读vue-resize的具体用法
2020/07/08 Javascript
python正则中最短匹配实现代码
2018/01/16 Python
Python使用gRPC传输协议教程
2018/10/16 Python
Python3从零开始搭建一个语音对话机器人的实现
2019/08/23 Python
Pytest参数化parametrize使用代码实例
2020/02/22 Python
Python优秀开源项目Rich源码解析的流程分析
2020/07/06 Python
Python+unittest+requests 接口自动化测试框架搭建教程
2020/10/09 Python
CSS3让登陆面板3D旋转起来
2016/05/03 HTML / CSS
HTML5的语法变化介绍
2013/08/13 HTML / CSS
美国牙科折扣计划:DentalPlans.com
2019/08/26 全球购物
求职自荐书范文
2013/12/04 职场文书
高中毕业自我鉴定
2013/12/13 职场文书
高中生活自我鉴定
2014/01/18 职场文书
监察建议书格式
2014/05/19 职场文书
庭外和解协议书
2016/03/23 职场文书
智慧人生:永远不需要向任何人解释你自己
2019/08/20 职场文书
Tomcat starup.bat 脚本实现开机自启动
2022/04/20 Servers