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

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点击切换类名改变样式的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue实现active点击切换方法

    循环的情况: 1.点击时传入index索引(获取当前点击的是哪个) @click="active(index)" 2.将索引值传入class(索引等于几就第几个添加active类) :class="{active:index==ins}" 3.在data里边添加ins:0(表示默认第一个添加active类) data{ ins:0 } 4.最后在methods里边添加方法 ctive (num) { this.ins=num } 非循环的情况: 1.在标签内写入点击

  • vue2.0中click点击当前li实现动态切换class

    vue2.0中click点击当前li实现动态切换class

    1,文件内容 ----//为item添加不存在的属性,需要使用vue提供的Vue.set( object, key, value )方法.  看详解:https://cn.vuejs.org/v2/api/#Vue-set <template> <div> <ul> <li v-for="(item,$index) in items" @click="selectStyle (item, $index) " :class=&

  • vue实现样式之间的切换及vue动态样式的实现方法

    vue实现样式之间的切换及vue动态样式的实现方法

    前言 既然我们选择了vue,那么在做东西时就不要想着去操作dom,所有的都交给vue来解决. 下面来说一个很简单但是很常用的效果,可能人人都会用到这样的需求 请看下图 导航栏的样式切换功能,如果我们使用jquery之类的东西来写,可能要写好多代码,那么我们用vue呢, 代码如下 html 附上vue中style与class绑定API <div id="wrap" class="box"> <div v-for="(list,index)

  • vue2.0 根据状态值进行样式的改变展示方法

    用户在进行流程操作的时候,一般分为进行中,未开始,已完成,前端页面就要进行相应的状态区分展示.这里测试的是背景颜色区分. demo: <span class="contract-span" :class="statusText[item.status][0]">{{statusText[item.status][1]}}</span> statusText: { 0: ['span-delay', '进行中'], 1: ['span-fini

  • vue实现tab切换外加样式切换方法

    实例如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; list-style: none } #app { width: 504px; height: 300px; margin: 100

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

    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

  • Vue2.0 给Tab标签页和页面切换过渡添加样式的方法

    使用vue-router构建单页应用时,如何给当前页面的标签页添加样式呢? 1.在app.vue文件中你的nav中添加路由地址 2.依然在app.vue文件中,添加样式 不用在任何位置加class,只要在css中写上这个名称,样式自己随意改. 如何在单页切换的时候添加过渡? 1.在app.vue文件中,将router-view包裹在transition中,transition加个name. 2.在app.vue中添加css样式(你的transition的name是什么,第一个单词就是什么) 以上

  • Vue.js点击切换按钮改变内容的实例讲解

    代码实例: 代码描述:点击切换按钮,来改变显示的内容,切换不同的单位.flag相当于一个开关,控制开关的改变,来切换不同的单位.同样适用于其他的切换内容实例,也可设置按钮点击显示隐藏等. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue点击切换改变内容</title> <script src="https://cdn.bo

  • Vue2.0 多 Tab切换组件的封装实例

    Vue2.0 多 Tab切换组件的封装实例

    Vue2.0 多 Tab切换组件简单封装,满足自己简单的功能,可以直接拿去使用! 首先上效果图: 功能简单介绍: 1.支持tab切换 2.支持tab定位 3.支持tab自动化 仿React多Tab实现,总之可以正常使用满足日常需求, 1.使用方法: ==index.vue文件== <TabItems> <div name="买入" class="first"> <Content :isContTab = "0" /&

  • vue2.0 自定义 饼状图 (Echarts)组件的方法

    1.自定义 图表 组件 Echarts.vue <!-- 自定义 echart 组件 --> <template> <div> <!-- echart表格 --> <div id="myChart" :style="echartStyle"></div> </div> </template> <script> export default { props: {

  • vue2.0结合DataTable插件实现表格动态刷新的方法详解

    vue2.0结合DataTable插件实现表格动态刷新的方法详解

    本文实例讲述了vue2.0结合DataTable插件实现表格动态刷新的方法.分享给大家供大家参考,具体如下: 产品提出的需求是这样的,很普通的一个统计server端task完成率和状态的表格,要自动刷新其中的数据,并且当单个task完成的时候report给server端,看起来好easy好easy的一个需求啊!且听我说完哈! 我这边使用的是框架是vue,表格自然用v-for渲染,然后我们这边分页搜索神马的都是前端弄,也就是说后端只管把一大坨数据塞到前端,然后前端自己组装分页器和完成模糊搜索,所以

  • JavaScript实现点击单元格改变背景色的方法

    本文实例讲述了JavaScript实现点击单元格改变背景色的方法.分享给大家供大家参考,具体如下: <html> <body> <table onclick="SetColor(event)" id="_t" width="500" border="0" cellspacing="0" cellpadding="0"> <tr> <t

  • Vue 菜单栏点击切换单个class(高亮)的方法

    步骤: 遍历对象(goods)获取菜单栏每一项的对象(item)和下标(index) 添加点击事件toggle(),传入下标参数:@click="fn1();fn2()" 动态切换classname::class="{'active':index ==checkindex }"> (class赋予对应下标值的DOM) ps:该方法直接切换class,不需要手动添加清除其他非动态DOM的class html <ul> <li v-for=&qu

  • vue2.0 循环遍历加载不同图片的方法

    demo: <div v-for="item in temps" :key="item.id"> <div class="contract-item"> <img :src="item.imgUrl"> </div> </div> 引入图片,注意路径: import con1 from "@/assets/img/con01.png"; impor

  • vue2.0 axios跨域并渲染的问题解决方法

    (用的脚手架vue-cli) 第一步: 在main.js中如下声明使用 import axios from 'axios'; Vue.prototype.$axios=axios; 那么在其他vue组件中就可以this.$axios调用使用 第二步:在webpack配置一下proxyTable(config之下的index.js) dev: { 加入以下 proxyTable: { '/api': { target: 'http://api.douban.com',//设置你调用的接口域名和端口

随机推荐