CSS Vue.js 单击时切换类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33731939/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-30 11:35:17 来源:igfitidea点击:
Vue.js toggle class on click
提问by adam78
How does toggle a class in vue.js?
vue.js 中如何切换类？
I have the following:
我有以下几点：
<th class="initial " v-on="click: myFilter">
<span class="wkday">M</span>
</th>
new Vue({
el: '#my-container',
data: {},
methods: {
myFilter: function(){
// some code to filter users
}
}
});
When I click thI want to apply activeas a class as follows:
当我点击时，th我想active作为一个班级申请，如下所示：
<th class="initial active" v-on="click: myFilter">
<span class="wkday">M</span>
</th>
This needs to toggle i.e. each time its clicked it needs to add/remove the class.
这需要切换，即每次点击它需要添加/删除类。
采纳答案by Douglas.Sesar
You could have the active class be dependent upon a boolean data value:
您可以让活动类依赖于布尔数据值：
<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
}
}
})
回答by moabi
Without the need of a method:
不需要方法：
// html element
<div id="mobile-toggle"
v-bind:class="{ active: showMobileMenu }"
v-on:click="showMobileMenu = !showMobileMenu">
</div>
//in your vue.js app
data: {
showMobileMenu: false
}
回答by NateW
This answer relevant for Vue.js version 2
这个答案与 Vue.js version 2
<th
class="initial "
v-on:click="myFilter"
v-bind:class="{ active: isActive }"
>
<span class="wkday">M</span>
</th>
The rest of the answer by Douglas is still applicable (setting up the new Vue instance with isActive: false, etc).
道格拉斯的其余答案仍然适用（使用 等设置新的 Vue 实例isActive: false）。
Relevant docs: https://vuejs.org/v2/guide/class-and-style.html#Object-Syntaxand https://vuejs.org/v2/guide/events.html#Method-Event-Handlers
相关文档：https: //vuejs.org/v2/guide/class-and-style.html#Object-Syntax和https://vuejs.org/v2/guide/events.html#Method-Event-Handlers
回答by Fabian von Ellerts
If you don't need to access the toggle from outside the element, this code works without a data variable:
如果您不需要从元素外部访问切换，则此代码无需数据变量即可工作：
<a @click="e => e.target.classList.toggle('active')"></a>
回答by claudio
This example is using Lists: When clicking in some li it turn red
此示例使用列表：单击某些 li 时它会变成红色
html:
html：
<div id="app">
<ul>
<li @click="activate(li.id)" :class="{ active : active_el == li.id }" v-for="li in lista">{{li.texto}}</li>
</ul>
</div>
JS:
JS：
var app = new Vue({
el:"#app",
data:{
lista:[{"id":"1","texto":"line 1"},{"id":"2","texto":"line 2"},{"id":"3","texto":"line 3"},{"id":"4","texto":"line 4"},{"id":"5","texto":"line 5"}],
active_el:0
},
methods:{
activate:function(el){
this.active_el = el;
}
}
});
css
css
ul > li:hover {
cursor:pointer;
}
.active {
color:red;
font-weight:bold;
}
Fiddle:
小提琴：
回答by hbulens
In addition to NateW's answer, if you have hyphens in your css class name, you should wrap that class within (single) quotes:
除了 NateW 的答案之外，如果您的 css 类名中有连字符，则应该将该类包含在（单）引号中：
<th
class="initial "
v-on:click="myFilter"
v-bind:class="{ 'is-active' : isActive}"
>
<span class="wkday">M</span>
</th>
See thistopic for more on the subject.
回答by Ben Winding
If you need more than 1 class
如果您需要超过 1 个班级
You can do this:
你可以这样做：
<i id="icon"
v-bind:class="{ 'fa fa-star': showStar }"
v-on:click="showStar = !showStar"
>
</i>
data: {
showStar: true
}
Notice the single quotes ' around the classes!
注意类周围的单引号 '！
Thanks to everyone else's solutions.
感谢其他人的解决方案。
回答by Loi Nguyen Huynh
1.
1.
@click="$event.target.classList.toggle('active')"
2.
2.
:class="{ active }"
@click="active = !active"
3.
3.
:class="'initial ' + (active ? 'active' : '')"
@click="active = !active"
4.
4.
:class="['initial', { active }]"
@click="active = !active"
Reference link: https://vuejs.org/v2/guide/class-and-style.html
参考链接：https: //vuejs.org/v2/guide/class-and-style.html
Demo:
演示：
new Vue({
el: '#app1'
});
new Vue({
el: '#app2',
data: { active: false }
});
new Vue({
el: '#app3',
data: { active: false }
});
new Vue({
el: '#app4',
data: { active: false }
});.initial {
width: 300px;
height: 100px;
background: gray;
}
.active {
background: red;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!-- directly manipulation: not recommended -->
<div id="app1">
<button
class="initial"
@click="$event.target.classList.toggle('active')"
>$event.target.classList.toggle('active')</button>
</div>
<!-- binding by object -->
<div id="app2">
<button
class="initial"
:class="{ active }"
@click="active = !active"
>class="initial" :class="{ active }"</button>
</div>
<!-- binding by expression -->
<div id="app3">
<button
:class="'initial ' + (active ? 'active' : '')"
@click="active = !active"
>'initial ' + (active ? 'active' : '')</button>
</div>
<!-- binding with object combined array -->
<div id="app4">
<button
:class="['initial', { active }]"
@click="active = !active"
>['initial', { active }]</button>
</div>回答by bgreater
I've got a solution that allows you to check for different values of a prop and thus different <th>elements will become active/inactive. Using vue 2 syntax.
我有一个解决方案，可以让您检查道具的不同值，因此不同的<th>元素将变为活动/非活动状态。使用 vue 2 语法。
<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
}
}
})
回答by SagitSri
new Vue({
el: '#fsbar',
data:{
isActive: false
},
methods: {
toggle: function(){
this.isActive = !this.isActive;
}
}
});/*
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 > 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;
}
}<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>
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Our Custom CSS -->
<link rel="stylesheet" href="style4.css">
</head>
<body>
<div class="wrapper" id="fsbar">
<!-- Sidebar Holder -->
<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>
<!-- Page Content Holder -->
<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>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<!-- Bootstrap Js CDN -->
<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>