Vue Events

by Justin Chen

HTML

<div id="app">
  <ul>
    <li v-for="(idx,item) in list" :class="{'on':idx == sel}" @click="sel=idx">
      <h3>{{item.name}}</h3>
      <ul>
        <li v-for="(subidx,sub) in item.subNav" :class="{'subon':idx == sel && subidx == subsel}" @click="clickSub(idx, subidx)">{{sub}}</li>
      </ul>
    </li>
  </ul>
</div>

CSS

.on{
  color:red
}
.on ul{
  color:black
}
.subon {
  color:blue
}

JavaScript

new Vue({
    el: '#app',
    data: {
        list:[
					{
          	name:"菜单栏一",
            subNav:[
            	"子菜单",
              "子菜单",
              "子菜单"
            ]
          },
          {
          	name:"菜单栏二",
            subNav:[
            	"子菜单",
              "子菜单"
            ]
          }
        ],
        sel: -1,
        subsel: -1,
    },
    methods: {
    	clickSub: function(idx, subidx) {
      	this.sel = idx;
        this.subsel = subidx;
      },
    }
})