###前提・実現したい事
アクティブのタブに.activeクラスをつけたいです。
試した事...v-bind:class isActiveをli要素につけてみたのですが、
アクティブ以外のli要素にも.activeクラスがついてしまいます。
ご存知の方いらっしゃいましたらご教示頂けると幸いです。
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 </style> 8</head> 9<body> 10 <div id="app" v-cloak> 11 <ul> 12 <li v-for="(tab, index) in tabNav" @click="changeTab(index)">{{ tab }}</li> 13 </ul> 14 <div v-if="contents == 0"> 15 コンテンツ1 16 </div> 17 <div v-if="contents == 1"> 18 コンテンツ2 19 </div> 20 <div v-if="contents == 2"> 21 コンテンツ3 22 </div> 23 </div> 24 <script src="https://unpkg.com/vue/dist/vue.js"></script> 25 <script> 26 new Vue({ 27 el: '#app', 28 data: { 29 scrollY: 0, 30 tabNav: [ 31 'JavaScript', 32 'PHP', 33 'HTML' 34 ], 35 contents: 0 36 }, 37 methods: { 38 changeTab: function (index) { 39 this.contents = index; 40 alert("click"); 41 } 42 } 43 }) 44 45 </script> 46</body> 47</html>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/11/01 14:20