Vue2.0点击切换类名改变样式的方法


Posted in Javascript onAugust 22, 2018

1、使用index

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>vue导航</title>
 <style media="screen">
 *{
 margin:0;
 padding: 0;
 }
 ul li{
 list-style: none;
 }
 .navul{
 margin:100px auto 20px;
 overflow: hidden;
 }
 .navul li{
 background-color: #5597b4;
 padding:18px 30px;
 float:left;
 color: #fff;
 font-size: 18px;
 cursor: pointer;
 }
 .active{
 background-color: #5597b4;
 }
 .home .home,.new .new,.contact .contact,.service .service{
 background-color: skyblue;
 }
 .checked{
  background: #eff4f7;
 }
 </style>
</head>
<body>
 <div id="nav">
  <ul>
   <li v-for="(relation,index) in relations" v-bind:id="relation.id" v-bind:id="relation.id" v-bind:class="{checked:index==nowIndex}" v-on:click="relationClick(index)">
    <i></i>
    <span class="">{{relation.text}}</span>
   </li>
  </ul>
 </div>
 
 <script src="js/vue.js" charset="utf-8"></script>
 <script type="text/javascript">
 var nav = new Vue({
  el:'#nav',
  data:{
  relations: [
   {text:'项目',id:'program'},
   {text:'人员',id:'person'},
   {text:'机构',id:'organization'},
   {text:'技术',id:'tech'},
   {text:'地区',id:'location'},
   {text:'国家',id:'country'}
  ],
  nowIndex:0
  // willShow:false
  },
  methods:{
  relationClick:function(index){
   
   this.nowIndex=index;
  }
  }
 });
 </script>
</body>
</html>

2、通过改变当前值切换类名

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>点击切换</title>
 <style>
 .glyphicon-minus{
  color:#08f;
 }
 .glyphicon-plus{
  color:purple;
 }
 
 </style>
 <script src="js/vue.js"></script>
</head>
<body>
 
 <div id="box">
  <div style="width:100px; height:100px; background: #6bacdf;" v-show="isDisplay"></div>
 
  <div class="form-group">
  <button class="btn"
    :class="[isShow?'btn-primary':'']"
    @mouseover="toggleShow()"
    @mouseout="toggleShow()"
    v-text="btnStyle"></button>
 
  </div>
 
  <div class="">
  <button class="btn"
    :class="[isTrue?'glyphicon-minus':'glyphicon-plus']"
     @click="toggleBar()">切换类名按钮</button>
 
  </div>
 </div>
 
 
<script type="text/javascript">
 
 
  new Vue({
  el:'#box',
  data:{
   isDisplay:false,
   isShow: false,
   isTrue:true,
   btnStyle: 'Default'
  },
  methods:{
   toggleShow: function() {
   this.isShow = !this.isShow;
   },
   toggleBar:function(){
   this.isTrue = !this.isTrue;
   }
  },
  watch: {
   isShow: function(newVal) {
   // console.log(newVal);
   newVal ? this.btnStyle = 'Primary' : this.btnStyle = 'Default'
   }
  },
  });
 
 
 </script>
</body>
</html>

拓展知识:vue点击改变样式的实例

data里

isActive:-1,

method里

checkedItem(index){
 this.isActive=index;
},

页面里

<div v-for="(item,index) in nameoptions" v-bind:class="{active:index==isActive}" @click="checkItem(index)>{{item.name}}</div>

以上这篇Vue2.0点击切换类名改变样式的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
List Information About the Binary Files Used by an Application
Jun 11 Javascript
工作需要写的一个js拖拽组件
Jul 28 Javascript
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
Dec 11 Javascript
js获取某元素的class里面的css属性值代码
Jan 16 Javascript
jQuery动画效果相关方法实例分析
Dec 31 Javascript
Bootstrap3制作自己的导航栏
May 12 Javascript
使用开源工具制作网页验证码的方法
Oct 17 Javascript
微信小程序开发之IOS和Android兼容的问题
Sep 26 Javascript
vue 过滤器filter实例详解
Mar 14 Javascript
在vue中使用v-bind:class的选项卡方法
Sep 27 Javascript
vue props 单项数据流实例分享
Feb 16 Javascript
vue实现在进行增删改操作后刷新页面
Aug 05 Javascript
vuejs选中当前样式active的实例
Aug 22 #Javascript
详解如何在webpack中做预渲染降低首屏空白时间
Aug 22 #Javascript
基于vue中对鼠标划过事件的处理方式详解
Aug 22 #Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
Aug 22 #Javascript
JS封装的模仿qq右下角消息弹窗功能示例
Aug 22 #Javascript
当vue路由变化时,改变导航栏的样式方法
Aug 22 #Javascript
element-ui 设置菜单栏展开的方法
Aug 22 #Javascript
You might like
Php header()函数语法及使用代码
2013/11/04 PHP
使用XHGui来测试PHP性能的教程
2015/07/03 PHP
slice函数的用法 之不错的应用
2006/12/29 Javascript
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
2011/10/12 Javascript
jquery ajax 同步异步的执行 return值不能取得的解决方案
2012/01/08 Javascript
一个简单的JS鼠标悬停特效具体方法
2013/06/17 Javascript
JavaScript创建对象的写法
2013/08/29 Javascript
js实现仿百度瀑布流的方法
2015/02/05 Javascript
jquery.mobile 共同布局遇到的问题小结
2015/02/10 Javascript
js 实现省市区三级联动菜单效果
2017/02/20 Javascript
js判断用户是输入的地址请求的路径(实例讲解)
2017/07/18 Javascript
微信小程序实战篇之购物车的实现代码示例
2017/11/30 Javascript
10 种最常见的 Javascript 错误(频率最高)
2018/02/08 Javascript
微信小程序实现上拉加载功能
2019/11/20 Javascript
JS 事件机制完整示例分析
2020/01/15 Javascript
JS数组方法push()、pop()用法实例分析
2020/01/18 Javascript
[42:04]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第一局
2016/03/03 DOTA
[59:42]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python模块学习 datetime介绍
2012/08/27 Python
Python中使用select模块实现非阻塞的IO
2015/02/03 Python
Windows系统配置python脚本开机启动的3种方法分享
2015/03/10 Python
python中requests和https使用简单示例
2018/01/18 Python
使用Django搭建web服务器的例子(最最正确的方式)
2019/08/29 Python
Python打包工具PyInstaller的安装与pycharm配置支持PyInstaller详细方法
2020/02/27 Python
美国知名的摄影器材销售网站:Adorama
2017/02/01 全球购物
Charlotte Tilbury美国官网:英国美妆品牌
2017/10/13 全球购物
ONLY瑞典官网:世界知名服装品牌
2018/06/19 全球购物
简历中个人求职的自我评价模板
2013/11/29 职场文书
白酒业务员岗位职责
2013/12/27 职场文书
母亲节感恩活动记录
2014/03/16 职场文书
党员剖析材料范文
2014/12/18 职场文书
高中生个性发展自我评价
2015/03/09 职场文书
原告离婚代理词
2015/05/23 职场文书
2015年高二班主任工作总结
2015/05/25 职场文书
详解CocosCreator项目结构机制
2021/04/14 Javascript
python 对图片进行简单的处理
2021/06/23 Python