이제 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: '#app', data: { Alist: [{ name: '影视大咖' }, { name: '女明星' }, { name: '男明星' }, { name: '商业大亨' }], active: '' }, mounted() { }, methods: { selected(name) { this.active = name; } } }) </script> </body> </html>
위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되기를 바랍니다.
관련글:
사용자 이름이 유효한지 확인하기 위해 jQuery 기반의 Ajax 검증 구현 예
JQuery에서 엔터 트리거 버튼 이벤트 함수 구현 예
위 내용은 vue는 라벨 클릭 강조 표시 방법을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!