blocks|key|4453458|text|您可以让活动类依赖于一个布尔数据值：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4453459|<th+
++class="initial+"+
++v-on="click:+myFilter"
++v-class="{active:+isActive}">
++<span+class="wkday">M</span>
</th>

new+Vue({
++el:+'#my-container',

++data:+{
++++isActive:+false
++},

++methods:+{
++++myFilter:+function()+{
++++++this.isActive+=+!this.isActive;
++++++//+some+code+to+filter+users
++++}
++}
})|code-block|syntax|javascript|4453460|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You could have the active class be dependent upon a boolean data value:</p>

<pre><code>&lt;th 
  class="initial " 
  v-on="click: myFilter"
  v-class="{active: isActive}"&gt;
  &lt;span class="wkday"&gt;M&lt;/span&gt;
&lt;/th&gt;

new Vue({
  el: '#my-container',

  data: {
    isActive: false
  },

  methods: {
    myFilter: function() {
      this.isActive = !this.isActive;
      // some code to filter users
    }
  }
})
</code></pre>


blocks|key|4453524|text|此答案与Vue.js+version+2相关|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4453525|<th+
++class="initial+"+
++v-on:click="myFilter"
++v-bind:class="{+active:+isActive+}"
>
++<span+class="wkday">M</span>
</th>|code-block|syntax|javascript|4453526|Douglas回答的其余部分仍然适用(使用isActive:+false设置新的Vue实例，等等)。|4453527|相关文档：https://vuejs.org/v2/guide/class-and-style.html#Object-Syntax和https://vuejs.org/v2/guide/events.html#Method-Event-Handlers|4453528|entityMap|0|LINK|mutability|MUTABLE|url|https://vuejs.org/v2/guide/class-and-style.html#Object-Syntax|1|https://vuejs.org/v2/guide/events.html#Method-Event-Handlers^0|4|G|0|0|L|F|0|5|1P|0|1V|1O|1|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|11|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|12|8|@$9|13|A|14|B|C]]|D|@]|E|$]]|$1|M|3|N|5|6|7|15|8|@]|D|@$9|16|A|17|1|18]|$9|19|A|1A|1|1B]]|E|$]]|$1|O|3|-4|5|6|7|1C|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]|W|$5|R|S|T|E|$U|X]]]]

<p>This answer relevant for <code>Vue.js version 2</code></p>

<pre><code>&lt;th 
  class="initial " 
  v-on:click="myFilter"
  v-bind:class="{ active: isActive }"
&gt;
  &lt;span class="wkday"&gt;M&lt;/span&gt;
&lt;/th&gt;
</code></pre>

<p>The rest of the answer by Douglas is still applicable (setting up the new Vue instance with <code>isActive: false</code>, etc).</p>

<p>Relevant docs: <a href="https://vuejs.org/v2/guide/class-and-style.html#Object-Syntax" rel="noreferrer">https://vuejs.org/v2/guide/class-and-style.html#Object-Syntax</a> and <a href="https://vuejs.org/v2/guide/events.html#Method-Event-Handlers" rel="noreferrer">https://vuejs.org/v2/guide/events.html#Method-Event-Handlers</a></p>


blocks|key|4453369|text|除了NateW的回答之外，如果您的css类名中有连字符，则应该将该类括在(单)引号中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4453370|<th+
++class="initial+"+
++v-on:click="myFilter"
++v-bind:class="{+'is-active'+:+isActive}"
>

+<span+class="wkday">M</span>
+</th>|code-block|syntax|javascript|4453371|有关该主题的更多信息，请参阅this主题。|offset|length|4453372|entityMap|0|LINK|mutability|MUTABLE|url|https://laracasts.com/discuss/channels/vue/v-bindclass-has-problem-with-hyphenated-class-names^0|0|0|E|4|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>In addition to NateW's answer, if you have hyphens in your css class name, you should wrap that class within (single) quotes:</p>

<pre><code>&lt;th 
  class="initial " 
  v-on:click="myFilter"
  v-bind:class="{ 'is-active' : isActive}"
&gt;

 &lt;span class="wkday"&gt;M&lt;/span&gt;
 &lt;/th&gt;
</code></pre>

<p>See <a href="https://laracasts.com/discuss/channels/vue/v-bindclass-has-problem-with-hyphenated-class-names" rel="noreferrer">this</a> topic for more on the subject.</p>


blocks|key|4453407|text|不需要一种方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4453408|//+html+element,+will+display'active'+class+if+showMobile+is+true
//clicking+on+the+elment+will+toggle+showMobileMenu+to+true+and+false+alternatively
<div+id="mobile-toggle"
+:class="{+active:+showMobileMenu+}"
+@click="showMobileMenu+=+!showMobileMenu">
</div>

//in+your+vue.js+app
data:+{
++++showMobileMenu:+false
}|code-block|syntax|javascript|4453409|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Without the need of a method:</p>
<pre><code>// html element, will display'active' class if showMobile is true
//clicking on the elment will toggle showMobileMenu to true and false alternatively
&lt;div id=&quot;mobile-toggle&quot;
 :class=&quot;{ active: showMobileMenu }&quot;
 @click=&quot;showMobileMenu = !showMobileMenu&quot;&gt;
&lt;/div&gt;

//in your vue.js app
data: {
    showMobileMenu: false
}
</code></pre>


blocks|key|4453479|text|我有一个解决方案，它允许你检查一个属性的不同值，因此不同的<th>元素将变成活动/非活动的。使用vue+2语法。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4453480|<th+
class="initial+"+
@click.stop.prevent="myFilter('M')"
:class="[(activeDay+==+'M'+?+'active'+:+'')]">
<span+class="wkday">M</span>
</th>
...
<th+
class="initial+"+
@click.stop.prevent="myFilter('T')"
:class="[(activeDay+==+'T'+?+'active'+:+'')]">
<span+class="wkday">T</span>
</th>



new+Vue({
++el:+'#my-container',

++data:+{
++++++activeDay:+'M'
++},

++methods:+{
++++myFilter:+function(day){
++++++++this.activeDay+=+day;
++++++//+some+code+to+filter+users
++++}
++}
})|code-block|syntax|javascript|4453481|entityMap^0|T|4|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>I've got a solution that allows you to check for different values of a prop and thus different <code>&lt;th&gt;</code> elements will become active/inactive. Using vue 2 syntax.</p>

<pre><code>&lt;th 
class="initial " 
@click.stop.prevent="myFilter('M')"
:class="[(activeDay == 'M' ? 'active' : '')]"&gt;
&lt;span class="wkday"&gt;M&lt;/span&gt;
&lt;/th&gt;
...
&lt;th 
class="initial " 
@click.stop.prevent="myFilter('T')"
:class="[(activeDay == 'T' ? 'active' : '')]"&gt;
&lt;span class="wkday"&gt;T&lt;/span&gt;
&lt;/th&gt;



new Vue({
  el: '#my-container',

  data: {
      activeDay: 'M'
  },

  methods: {
    myFilter: function(day){
        this.activeDay = day;
      // some code to filter users
    }
  }
})
</code></pre>


blocks|key|4453765|text|如果您不需要从元素外部访问切换，则此代码无需数据变量即可工作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4453766|<a+@click="e+=>+e.target.classList.toggle('active')"></a>|code-block|syntax|javascript|4453767|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>If you don't need to access the toggle from outside the element, this code works without a data variable:</p>

<pre><code>&lt;a @click="e =&gt; e.target.classList.toggle('active')"&gt;&lt;/a&gt;
</code></pre>


blocks|key|4453789|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4453790|new+Vue({
++el:+'#fsbar',
++data:{
++++isActive:+false
++},
++methods:+{
++++toggle:+function(){
++++++this.isActive+=+!this.isActive;
++++}
++}
});|code-block|syntax|javascript|4453791|/*
++++DEMO+STYLE
*/
@import+"https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";


body+{
++++font-family:+'Poppins',+sans-serif;
++++background:+#fafafa;
}

p+{
++++font-family:+'Poppins',+sans-serif;
++++font-size:+1.1em;
++++font-weight:+300;
++++line-height:+1.7em;
++++color:+#999;
}

a,+a:hover,+a:focus+{
++++color:+inherit;
++++text-decoration:+none;
++++transition:+all+0.3s;
}

.navbar+{
++++padding:+15px+10px;
++++background:+#fff;
++++border:+none;
++++border-radius:+0;
++++margin-bottom:+40px;
++++box-shadow:+1px+1px+3px+rgba(0,+0,+0,+0.1);
}

.navbar-btn+{
++++box-shadow:+none;
++++outline:+none+!important;
++++border:+none;
}

.line+{
++++width:+100%25;
++++height:+1px;
++++border-bottom:+1px+dashed+#ddd;
++++margin:+40px+0;
}

i,+span+{
++++display:+inline-block;
}

/*+---------------------------------------------------
++++SIDEBAR+STYLE
-----------------------------------------------------+*/
.wrapper+{
++++display:+flex;
++++align-items:+stretch;
}

#sidebar+{
++++min-width:+250px;
++++max-width:+250px;
++++background:+#7386D5;
++++color:+#fff;
++++transition:+all+0.3s;
}

#sidebar.active+{
++++min-width:+80px;
++++max-width:+80px;
++++text-align:+center;
}

#sidebar.active+.sidebar-header+h3,+#sidebar.active+.CTAs+{
++++display:+none;
}

#sidebar.active+.sidebar-header+strong+{
++++display:+block;
}

#sidebar+ul+li+a+{
++++text-align:+left;
}

#sidebar.active+ul+li+a+{
++++padding:+20px+10px;
++++text-align:+center;
++++font-size:+0.85em;
}

#sidebar.active+ul+li+a+i+{
++++margin-right:++0;
++++display:+block;
++++font-size:+1.8em;
++++margin-bottom:+5px;
}

#sidebar.active+ul+ul+a+{
++++padding:+10px+!important;
}

#sidebar.active+a[aria-expanded="false"]::before,+#sidebar.active+a[aria-expanded="true"]::before+{
++++top:+auto;
++++bottom:+5px;
++++right:+50%25;
++++-webkit-transform:+translateX(50%25);
++++-ms-transform:+translateX(50%25);
++++transform:+translateX(50%25);
}

#sidebar+.sidebar-header+{
++++padding:+20px;
++++background:+#6d7fcc;
}

#sidebar+.sidebar-header+strong+{
++++display:+none;
++++font-size:+1.8em;
}

#sidebar+ul.components+{
++++padding:+20px+0;
++++border-bottom:+1px+solid+#47748b;
}

#sidebar+ul+li+a+{
++++padding:+10px;
++++font-size:+1.1em;
++++display:+block;
}
#sidebar+ul+li+a:hover+{
++++color:+#7386D5;
++++background:+#fff;
}
#sidebar+ul+li+a+i+{
++++margin-right:+10px;
}

#sidebar+ul+li.active+>+a,+a[aria-expanded="true"]+{
++++color:+#fff;
++++background:+#6d7fcc;
}


a[data-toggle="collapse"]+{
++++position:+relative;
}

a[aria-expanded="false"]::before,+a[aria-expanded="true"]::before+{
++++content:+'\e259';
++++display:+block;
++++position:+absolute;
++++right:+20px;
++++font-family:+'Glyphicons+Halflings';
++++font-size:+0.6em;
}
a[aria-expanded="true"]::before+{
++++content:+'\e260';
}


ul+ul+a+{
++++font-size:+0.9em+!important;
++++padding-left:+30px+!important;
++++background:+#6d7fcc;
}

ul.CTAs+{
++++padding:+20px;
}

ul.CTAs+a+{
++++text-align:+center;
++++font-size:+0.9em+!important;
++++display:+block;
++++border-radius:+5px;
++++margin-bottom:+5px;
}

a.download+{
++++background:+#fff;
++++color:+#7386D5;
}

a.article,+a.article:hover+{
++++background:+#6d7fcc+!important;
++++color:+#fff+!important;
}



/*+---------------------------------------------------
++++CONTENT+STYLE
-----------------------------------------------------+*/
#content+{
++++padding:+20px;
++++min-height:+100vh;
++++transition:+all+0.3s;
}


/*+---------------------------------------------------
++++MEDIAQUERIES
-----------------------------------------------------+*/
@media+(max-width:+768px)+{
++++#sidebar+{
++++++++min-width:+80px;
++++++++max-width:+80px;
++++++++text-align:+center;
++++++++margin-left:+-80px+!important+;
++++}
++++a[aria-expanded="false"]::before,+a[aria-expanded="true"]::before+{
++++++++top:+auto;
++++++++bottom:+5px;
++++++++right:+50%25;
++++++++-webkit-transform:+translateX(50%25);
++++++++-ms-transform:+translateX(50%25);
++++++++transform:+translateX(50%25);
++++}
++++#sidebar.active+{
++++++++margin-left:+0+!important;
++++}

++++#sidebar+.sidebar-header+h3,+#sidebar+.CTAs+{
++++++++display:+none;
++++}

++++#sidebar+.sidebar-header+strong+{
++++++++display:+block;
++++}

++++#sidebar+ul+li+a+{
++++++++padding:+20px+10px;
++++}

++++#sidebar+ul+li+a+span+{
++++++++font-size:+0.85em;
++++}
++++#sidebar+ul+li+a+i+{
++++++++margin-right:++0;
++++++++display:+block;
++++}

++++#sidebar+ul+ul+a+{
++++++++padding:+10px+!important;
++++}

++++#sidebar+ul+li+a+i+{
++++++++font-size:+1.3em;
++++}
++++#sidebar+{
++++++++margin-left:+0;
++++}
++++#sidebarCollapse+span+{
++++++++display:+none;
++++}
}|4453792|<script+src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!DOCTYPE+html>
<html>
++++<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>Collapsible+sidebar+using+Bootstrap+3</title>

+++++++++
++++++++<link+rel="stylesheet"+href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
++++++++
++++++++<link+rel="stylesheet"+href="style4.css">
++++</head>
++++<body>



++++++++<div+class="wrapper"+id="fsbar">
++++++++++++
++++++++++++<nav+id="sidebar"+:class="{+active:+isActive+}">
++++++++++++++++<div+class="sidebar-header">
++++++++++++++++++++<h3>Bootstrap+Sidebar</h3>
++++++++++++++++++++<strong>BS</strong>
++++++++++++++++</div>

++++++++++++++++<ul+class="list-unstyled+components">
++++++++++++++++++++<li+class="active">
++++++++++++++++++++++++<a+href="#homeSubmenu"+data-toggle="collapse"+aria-expanded="false">
++++++++++++++++++++++++++++<i+class="glyphicon+glyphicon-home"></i>
++++++++++++++++++++++++++++Home
++++++++++++++++++++++++</a>
++++++++++++++++++++++++<ul+class="collapse+list-unstyled"+id="homeSubmenu">
++++++++++++++++++++++++++++<li><a+href="#">Home+1</a></li>
++++++++++++++++++++++++++++<li><a+href="#">Home+2</a></li>
++++++++++++++++++++++++++++<li><a+href="#">Home+3</a></li>
++++++++++++++++++++++++</ul>
++++++++++++++++++++</li>
++++++++++++++++++++<li>
++++++++++++++++++++++++<a+href="#">
++++++++++++++++++++++++++++<i+class="glyphicon+glyphicon-briefcase"></i>
++++++++++++++++++++++++++++About
++++++++++++++++++++++++</a>
++++++++++++++++++++++++<a+href="#pageSubmenu"+data-toggle="collapse"+aria-expanded="false">
++++++++++++++++++++++++++++<i+class="glyphicon+glyphicon-duplicate"></i>
++++++++++++++++++++++++++++Pages
++++++++++++++++++++++++</a>
++++++++++++++++++++++++<ul+class="collapse+list-unstyled"+id="pageSubmenu">
++++++++++++++++++++++++++++<li><a+href="#">Page+1</a></li>
++++++++++++++++++++++++++++<li><a+href="#">Page+2</a></li>
++++++++++++++++++++++++++++<li><a+href="#">Page+3</a></li>
++++++++++++++++++++++++</ul>
++++++++++++++++++++</li>
++++++++++++++++++++<li>
++++++++++++++++++++++++<a+href="#">
++++++++++++++++++++++++++++<i+class="glyphicon+glyphicon-link"></i>
++++++++++++++++++++++++++++Portfolio
++++++++++++++++++++++++</a>
++++++++++++++++++++</li>
++++++++++++++++++++<li>
++++++++++++++++++++++++<a+href="#">
++++++++++++++++++++++++++++<i+class="glyphicon+glyphicon-paperclip"></i>
++++++++++++++++++++++++++++FAQ
+++++++++++++++++++++++isActive:+false,+</a>
++++++++++++++++++++</li>
++++++++++++++++++++<li>
++++++++++++++++++++++++<a+href="#">
++++++++++++++++++++++++++++<i+class="glyphicon+glyphicon-send"></i>
++++++++++++++++++++++++++++Contact
++++++++++++++++++++++++</a>
++++++++++++++++++++</li>
++++++++++++++++</ul>

++++++++++++++++<ul+class="list-unstyled+CTAs">
++++++++++++++++++++<li><a+href="https://bootstrapious.com/tutorial/files/sidebar.zip"+class="download">Download+source</a></li>
++++++++++++++++++++<li><a+href="https://bootstrapious.com/p/bootstrap-sidebar"+class="article">Back+to+article</a></li>
++++++++++++++++</ul>
++++++++++++</nav>

++++++++++++
++++++++++++<div+id="content">

++++++++++++++++<nav+class="navbar+navbar-default">
++++++++++++++++++++<div+class="container-fluid">

++++++++++++++++++++++++<div+class="navbar-header">
++++++++++++++++++++++++++++<button+type="button"+id="sidebarCollapse"+class="btn+btn-info+navbar-btn"+@click="toggle()">
++++++++++++++++++++++++++++++++<i+class="glyphicon+glyphicon-align-left"></i>
++++++++++++++++++++++++++++++++<span>Toggle+Sidebar</span>
++++++++++++++++++++++++++++</button>
++++++++++++++++++++++++</div>

++++++++++++++++++++++++<div+class="collapse+navbar-collapse"+id="bs-example-navbar-collapse-1">
++++++++++++++++++++++++++++<ul+class="nav+navbar-nav+navbar-right">
++++++++++++++++++++++++++++++++<li><a+href="#">Page</a></li>
++++++++++++++++++++++++++++++++<li><a+href="#">Page</a></li>
++++++++++++++++++++++++++++++++<li><a+href="#">Page</a></li>
++++++++++++++++++++++++++++++++<li><a+href="#">Page</a></li>
++++++++++++++++++++++++++++</ul>
++++++++++++++++++++++++</div>
++++++++++++++++++++</div>
++++++++++++++++</nav>

++++++++++++++++<h2>Collapsible+Sidebar+Using+Bootstrap+3</h2>
++++++++++++++++<p>Lorem+ipsum+dolor+sit+amet,+consectetur+adipisicing+elit,+sed+do+eiusmod+tempor+incididunt+ut+labore+et+dolore+magna+aliqua.+Ut+enim+ad+minim+veniam,+quis+nostrud+exercitation+ullamco+laboris+nisi+ut+aliquip+ex+ea+commodo+consequat.+Duis+aute+irure+dolor+in+reprehenderit+in+voluptate+velit+esse+cillum+dolore+eu+fugiat+nulla+pariatur.+Excepteur+sint+occaecat+cupidatat+non+proident,+sunt+in+culpa+qui+officia+deserunt+mollit+anim+id+est+laborum.</p>
++++++++++++++++<p>Lorem+ipsum+dolor+sit+amet,+consectetur+adipisicing+elit,+sed+do+eiusmod+tempor+incididunt+ut+labore+et+dolore+magna+aliqua.+Ut+enim+ad+minim+veniam,+quis+nostrud+exercitation+ullamco+laboris+nisi+ut+aliquip+ex+ea+commodo+consequat.+Duis+aute+irure+dolor+in+reprehenderit+in+voluptate+velit+esse+cillum+dolore+eu+fugiat+nulla+pariatur.+Excepteur+sint+occaecat+cupidatat+non+proident,+sunt+in+culpa+qui+officia+deserunt+mollit+anim+id+est+laborum.</p>

++++++++++++++++<div+class="line"></div>

++++++++++++++++<h2>Lorem+Ipsum+Dolor</h2>
++++++++++++++++<p>Lorem+ipsum+dolor+sit+amet,+consectetur+adipisicing+elit,+sed+do+eiusmod+tempor+incididunt+ut+labore+et+dolore+magna+aliqua.+Ut+enim+ad+minim+veniam,+quis+nostrud+exercitation+ullamco+laboris+nisi+ut+aliquip+ex+ea+commodo+consequat.+Duis+aute+irure+dolor+in+reprehenderit+in+voluptate+velit+esse+cillum+dolore+eu+fugiat+nulla+pariatur.+Excepteur+sint+occaecat+cupidatat+non+proident,+sunt+in+culpa+qui+officia+deserunt+mollit+anim+id+est+laborum.</p>

++++++++++++++++<div+class="line"></div>

++++++++++++++++<h2>Lorem+Ipsum+Dolor</h2>
++++++++++++++++<p>Lorem+ipsum+dolor+sit+amet,+consectetur+adipisicing+elit,+sed+do+eiusmod+tempor+incididunt+ut+labore+et+dolore+magna+aliqua.+Ut+enim+ad+minim+veniam,+quis+nostrud+exercitation+ullamco+laboris+nisi+ut+aliquip+ex+ea+commodo+consequat.+Duis+aute+irure+dolor+in+reprehenderit+in+voluptate+velit+esse+cillum+dolore+eu+fugiat+nulla+pariatur.+Excepteur+sint+occaecat+cupidatat+non+proident,+sunt+in+culpa+qui+officia+deserunt+mollit+anim+id+est+laborum.</p>

++++++++++++++++<div+class="line"></div>

++++++++++++++++<h3>Lorem+Ipsum+Dolor</h3>
++++++++++++++++<p>Lorem+ipsum+dolor+sit+amet,+consectetur+adipisicing+elit,+sed+do+eiusmod+tempor+incididunt+ut+labore+et+dolore+magna+aliqua.+Ut+enim+ad+minim+veniam,+quis+nostrud+exercitation+ullamco+laboris+nisi+ut+aliquip+ex+ea+commodo+consequat.+Duis+aute+irure+dolor+in+reprehenderit+in+voluptate+velit+esse+cillum+dolore+eu+fugiat+nulla+pariatur.+Excepteur+sint+occaecat+cupidatat+non+proident,+sunt+in+culpa+qui+officia+deserunt+mollit+anim+id+est+laborum.</p>
++++++++++++</div>
++++++++</div>





++++++++
+++++++++<script+src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
+++++++++
+++++++++<script+src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

++++++++/<script+type="text/javascript">
+++++++++//++++$(document).ready(function+()+{
++++++++++//+++++++$('#sidebarCollapse').on('click',+function+()+{
+++++++++++//++++++++++$('#sidebar').toggleClass('active');
++++++++++++//+++++});
++++++++++++//+});+jquery+equivalent+to+vue
+++++++++</script>
++++</body>
</html>|4453793|4453794|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|O|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|I|3|J|5|D|7|Q|8|@]|9|@]|A|$E|F]]|$1|K|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>new Vue({
  el: '#fsbar',
  data:{
    isActive: false
  },
  methods: {
    toggle: function(){
      this.isActive = !this.isActive;
    }
  }
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>/*
    DEMO STYLE
*/
@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";


body {
    font-family: 'Poppins', sans-serif;
    background: #fafafa;
}

p {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1em;
    font-weight: 300;
    line-height: 1.7em;
    color: #999;
}

a, a:hover, a:focus {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s;
}

.navbar {
    padding: 15px 10px;
    background: #fff;
    border: none;
    border-radius: 0;
    margin-bottom: 40px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

.navbar-btn {
    box-shadow: none;
    outline: none !important;
    border: none;
}

.line {
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed #ddd;
    margin: 40px 0;
}

i, span {
    display: inline-block;
}

/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
    display: flex;
    align-items: stretch;
}

#sidebar {
    min-width: 250px;
    max-width: 250px;
    background: #7386D5;
    color: #fff;
    transition: all 0.3s;
}

#sidebar.active {
    min-width: 80px;
    max-width: 80px;
    text-align: center;
}

#sidebar.active .sidebar-header h3, #sidebar.active .CTAs {
    display: none;
}

#sidebar.active .sidebar-header strong {
    display: block;
}

#sidebar ul li a {
    text-align: left;
}

#sidebar.active ul li a {
    padding: 20px 10px;
    text-align: center;
    font-size: 0.85em;
}

#sidebar.active ul li a i {
    margin-right:  0;
    display: block;
    font-size: 1.8em;
    margin-bottom: 5px;
}

#sidebar.active ul ul a {
    padding: 10px !important;
}

#sidebar.active a[aria-expanded="false"]::before, #sidebar.active a[aria-expanded="true"]::before {
    top: auto;
    bottom: 5px;
    right: 50%;
    -webkit-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%);
}

#sidebar .sidebar-header {
    padding: 20px;
    background: #6d7fcc;
}

#sidebar .sidebar-header strong {
    display: none;
    font-size: 1.8em;
}

#sidebar ul.components {
    padding: 20px 0;
    border-bottom: 1px solid #47748b;
}

#sidebar ul li a {
    padding: 10px;
    font-size: 1.1em;
    display: block;
}
#sidebar ul li a:hover {
    color: #7386D5;
    background: #fff;
}
#sidebar ul li a i {
    margin-right: 10px;
}

#sidebar ul li.active &gt; a, a[aria-expanded="true"] {
    color: #fff;
    background: #6d7fcc;
}


a[data-toggle="collapse"] {
    position: relative;
}

a[aria-expanded="false"]::before, a[aria-expanded="true"]::before {
    content: '\e259';
    display: block;
    position: absolute;
    right: 20px;
    font-family: 'Glyphicons Halflings';
    font-size: 0.6em;
}
a[aria-expanded="true"]::before {
    content: '\e260';
}


ul ul a {
    font-size: 0.9em !important;
    padding-left: 30px !important;
    background: #6d7fcc;
}

ul.CTAs {
    padding: 20px;
}

ul.CTAs a {
    text-align: center;
    font-size: 0.9em !important;
    display: block;
    border-radius: 5px;
    margin-bottom: 5px;
}

a.download {
    background: #fff;
    color: #7386D5;
}

a.article, a.article:hover {
    background: #6d7fcc !important;
    color: #fff !important;
}



/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */
#content {
    padding: 20px;
    min-height: 100vh;
    transition: all 0.3s;
}


/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */
@media (max-width: 768px) {
    #sidebar {
        min-width: 80px;
        max-width: 80px;
        text-align: center;
        margin-left: -80px !important ;
    }
    a[aria-expanded="false"]::before, a[aria-expanded="true"]::before {
        top: auto;
        bottom: 5px;
        right: 50%;
        -webkit-transform: translateX(50%);
        -ms-transform: translateX(50%);
        transform: translateX(50%);
    }
    #sidebar.active {
        margin-left: 0 !important;
    }

    #sidebar .sidebar-header h3, #sidebar .CTAs {
        display: none;
    }

    #sidebar .sidebar-header strong {
        display: block;
    }

    #sidebar ul li a {
        padding: 20px 10px;
    }

    #sidebar ul li a span {
        font-size: 0.85em;
    }
    #sidebar ul li a i {
        margin-right:  0;
        display: block;
    }

    #sidebar ul ul a {
        padding: 10px !important;
    }

    #sidebar ul li a i {
        font-size: 1.3em;
    }
    #sidebar {
        margin-left: 0;
    }
    #sidebarCollapse span {
        display: none;
    }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"&gt;&lt;/script&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;meta charset="utf-8"&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
        &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;

        &lt;title&gt;Collapsible sidebar using Bootstrap 3&lt;/title&gt;

         &lt;!-- Bootstrap CSS CDN --&gt;
        &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
        &lt;!-- Our Custom CSS --&gt;
        &lt;link rel="stylesheet" href="style4.css"&gt;
    &lt;/head&gt;
    &lt;body&gt;



        &lt;div class="wrapper" id="fsbar"&gt;
            &lt;!-- Sidebar Holder --&gt;
            &lt;nav id="sidebar" :class="{ active: isActive }"&gt;
                &lt;div class="sidebar-header"&gt;
                    &lt;h3&gt;Bootstrap Sidebar&lt;/h3&gt;
                    &lt;strong&gt;BS&lt;/strong&gt;
                &lt;/div&gt;

                &lt;ul class="list-unstyled components"&gt;
                    &lt;li class="active"&gt;
                        &lt;a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false"&gt;
                            &lt;i class="glyphicon glyphicon-home"&gt;&lt;/i&gt;
                            Home
                        &lt;/a&gt;
                        &lt;ul class="collapse list-unstyled" id="homeSubmenu"&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Home 1&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Home 2&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Home 3&lt;/a&gt;&lt;/li&gt;
                        &lt;/ul&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href="#"&gt;
                            &lt;i class="glyphicon glyphicon-briefcase"&gt;&lt;/i&gt;
                            About
                        &lt;/a&gt;
                        &lt;a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false"&gt;
                            &lt;i class="glyphicon glyphicon-duplicate"&gt;&lt;/i&gt;
                            Pages
                        &lt;/a&gt;
                        &lt;ul class="collapse list-unstyled" id="pageSubmenu"&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Page 1&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Page 2&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Page 3&lt;/a&gt;&lt;/li&gt;
                        &lt;/ul&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href="#"&gt;
                            &lt;i class="glyphicon glyphicon-link"&gt;&lt;/i&gt;
                            Portfolio
                        &lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href="#"&gt;
                            &lt;i class="glyphicon glyphicon-paperclip"&gt;&lt;/i&gt;
                            FAQ
                       isActive: false, &lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a href="#"&gt;
                            &lt;i class="glyphicon glyphicon-send"&gt;&lt;/i&gt;
                            Contact
                        &lt;/a&gt;
                    &lt;/li&gt;
                &lt;/ul&gt;

                &lt;ul class="list-unstyled CTAs"&gt;
                    &lt;li&gt;&lt;a href="https://bootstrapious.com/tutorial/files/sidebar.zip" class="download"&gt;Download source&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="https://bootstrapious.com/p/bootstrap-sidebar" class="article"&gt;Back to article&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/nav&gt;

            &lt;!-- Page Content Holder --&gt;
            &lt;div id="content"&gt;

                &lt;nav class="navbar navbar-default"&gt;
                    &lt;div class="container-fluid"&gt;

                        &lt;div class="navbar-header"&gt;
                            &lt;button type="button" id="sidebarCollapse" class="btn btn-info navbar-btn" @click="toggle()"&gt;
                                &lt;i class="glyphicon glyphicon-align-left"&gt;&lt;/i&gt;
                                &lt;span&gt;Toggle Sidebar&lt;/span&gt;
                            &lt;/button&gt;
                        &lt;/div&gt;

                        &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
                            &lt;ul class="nav navbar-nav navbar-right"&gt;
                                &lt;li&gt;&lt;a href="#"&gt;Page&lt;/a&gt;&lt;/li&gt;
                                &lt;li&gt;&lt;a href="#"&gt;Page&lt;/a&gt;&lt;/li&gt;
                                &lt;li&gt;&lt;a href="#"&gt;Page&lt;/a&gt;&lt;/li&gt;
                                &lt;li&gt;&lt;a href="#"&gt;Page&lt;/a&gt;&lt;/li&gt;
                            &lt;/ul&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/nav&gt;

                &lt;h2&gt;Collapsible Sidebar Using Bootstrap 3&lt;/h2&gt;
                &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
                &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;

                &lt;div class="line"&gt;&lt;/div&gt;

                &lt;h2&gt;Lorem Ipsum Dolor&lt;/h2&gt;
                &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;

                &lt;div class="line"&gt;&lt;/div&gt;

                &lt;h2&gt;Lorem Ipsum Dolor&lt;/h2&gt;
                &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;

                &lt;div class="line"&gt;&lt;/div&gt;

                &lt;h3&gt;Lorem Ipsum Dolor&lt;/h3&gt;
                &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;





        &lt;!-- jQuery CDN --&gt;
         &lt;script src="https://code.jquery.com/jquery-1.12.0.min.js"&gt;&lt;/script&gt;
         &lt;!-- Bootstrap Js CDN --&gt;
         &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;

        /&lt;script type="text/javascript"&gt;
         //    $(document).ready(function () {
          //       $('#sidebarCollapse').on('click', function () {
           //          $('#sidebar').toggleClass('active');
            //     });
            // }); jquery equivalent to vue
         &lt;/script&gt;
    &lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4453801|text|尝试：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4453802|<template>
+++<th+:class="'initial+'%2B+active"+v-on="click:+myFilter">
+++++++<span+class="wkday">M</span>
+++</th>++
</template>

<script+lang="ts">

++++active:string=''
++++myFilter(){
+++++++this.active='active'
++++}
</script>

<style>
++.active{
+++++/***your+action***/
+++}

</style>++++|code-block|syntax|javascript|4453803|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Try :</p>

<pre><code>&lt;template&gt;
   &lt;th :class="'initial '+ active" v-on="click: myFilter"&gt;
       &lt;span class="wkday"&gt;M&lt;/span&gt;
   &lt;/th&gt;  
&lt;/template&gt;

&lt;script lang="ts"&gt;

    active:string=''
    myFilter(){
       this.active='active'
    }
&lt;/script&gt;

&lt;style&gt;
  .active{
     /***your action***/
   }

&lt;/style&gt;    
</code></pre>


blocks|key|4453584|text|对于nuxt+link和bootstrap+v5+navbar-nav，我使用子组件|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4453585|+++++++++++++<nuxt-link
++++++++++++++@click.prevent.native="isDropdwonMenuVisible+=+!isDropdwonMenuVisible"
++++++++++++++to=""
++++++++++++++:title="item.title"
++++++++++++++:class="[item.cssClasses,+{show:+isDropdwonMenuVisible}]"
++++++++++++++:id="`navbarDropdownMenuLink-${index}`"
++++++++++++++:aria-expanded="[isDropdwonMenuVisible+?+true+:+false]"
++++++++++++++class="nav-link+dropdown-toggle"
++++++++++++++aria-current="page"
++++++++++++++role="button"
++++++++++++++data-toggle="dropdown"
++++++++++++>
++++++++++++++{{+item.label+}}
++++++++++++</nuxt-link>

data()+{
++++return+{
++++++isDropdwonMenuVisible:+false
++++}
++},|code-block|syntax|javascript|4453586|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>for nuxt link and bootstrap v5 navbar-nav, I used a child component</p>
<pre><code>             &lt;nuxt-link
              @click.prevent.native=&quot;isDropdwonMenuVisible = !isDropdwonMenuVisible&quot;
              to=&quot;&quot;
              :title=&quot;item.title&quot;
              :class=&quot;[item.cssClasses, {show: isDropdwonMenuVisible}]&quot;
              :id=&quot;`navbarDropdownMenuLink-${index}`&quot;
              :aria-expanded=&quot;[isDropdwonMenuVisible ? true : false]&quot;
              class=&quot;nav-link dropdown-toggle&quot;
              aria-current=&quot;page&quot;
              role=&quot;button&quot;
              data-toggle=&quot;dropdown&quot;
            &gt;
              {{ item.label }}
            &lt;/nuxt-link&gt;

data() {
    return {
      isDropdwonMenuVisible: false
    }
  },
</code></pre>


<p>How does toggle a class in vue.js?</p>

<p>I have the following:</p>

<pre><code>&lt;th class="initial " v-on="click: myFilter"&gt;
    &lt;span class="wkday"&gt;M&lt;/span&gt;
&lt;/th&gt;

new Vue({
  el: '#my-container',
  data: {},
  methods: {
    myFilter: function(){
      // some code to filter users
    }
  }
});
</code></pre>

<p>When I click <code>th</code> I want to apply <code>active</code> as a class as follows:</p>

<pre><code>&lt;th class="initial active" v-on="click: myFilter"&gt;
    &lt;span class="wkday"&gt;M&lt;/span&gt;
&lt;/th&gt;      
</code></pre>

<p>This needs to toggle i.e. each time its clicked it needs to add/remove the class.</p>


Vue.js toggle class on click

jQuery

如何在vue.js中切换类？我有以下几点：<th class="initial " v-on="click: myFilter">    <span class="wkday">M</span></th>new Vue({  el: '#my-container',  data: {},  methods: {    ...

问Vue.js在单击时切换类
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Vue.js在单击时切换类EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Vue.js在单击时切换类
EN