vue는 라벨 클릭 강조 표시 방법을 구현합니다.-JS 튜토리얼-php.cn

vue는 라벨 클릭 강조 표시 방법을 구현합니다.

亚连

풀어 주다： 2018-05-29 17:06:36

원래의

2430명이 탐색했습니다.

이제 Vue에서 태그 클릭 강조를 구현하는 방법을 공유하겠습니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

은 다음과 같습니다.

<!DOCTYPE html>
<html
lang="en">
<head>
<title></title>
<meta
charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1">
<!--<link href="css/style.css" rel="external nofollow" rel="stylesheet">-->
<script
src="js/jquery.js"></script>
<script
src="js/vue(2.0).js"></script>
<style
lang="less"
rel="stylesheet/less">
.a {
display:
block;
float:
left;
margin-left:
20px;
}
.active {
color:
red;
font-size:
17px;
}
</style>
</head>
<body>
<p
id="app">
<a
class="s-bt" @click="selected(Aname.name)"
 :class="{active: active == Aname.name}"
v-for="Aname in Alist">{{Aname.name}}</a>
</p>
<script>
new
Vue({
el:
&#39;#app&#39;,
data: {
Alist: [{
name:
&#39;影视大咖&#39;
}, {
name:
&#39;女明星&#39;
}, {
name:
&#39;男明星&#39;
}, {
name:
&#39;商业大亨&#39;
}],
active:
&#39;&#39;
},
mounted() {
},
methods: {
selected(name) {
this.active
= name;
}
}
})
</script>
</body>
</html>

로그인 후 복사

위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되기를 바랍니다.

사용자 이름이 유효한지 확인하기 위해 jQuery 기반의 Ajax 검증 구현 예

JQuery에서 엔터 트리거 버튼 이벤트 함수 구현 예

jQuery+Cookie에서 스킨 전환 기능 구현

위 내용은 vue는 라벨 클릭 강조 표시 방법을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!