vue v-bind和v-on简单用法

做一个简单的导航栏切换

 *{
     margin: 0;padding: 0;list-style: none;
 }
 #app ul {
     display:flex;
   width: 500px;
     line-height: 40px;
     background-color: #65B449;
     color: #fff;
     justify-content: baseline;
     box-sizing: border-box;
 }
 #app ul li{
     flex: 1;
     padding: 5px 10px;
     text-align: center;
 }
 span{
     background-color: #65B449;
     color: #fff;
     font-weight: bold;
    
     text-align: center;
     display: inline-block;
     padding: 6px 8px;
 }




<div id="app">
    <ul>
        <li 
        v-for="(item,index) in list"
        v-key="index"
        @click="handel(index)"
        :style="{'background-color':num==index?'#DC5A88':''}"
        >{{item.tittle}}</li>
    </ul>
    <p style="margin-top: 50px;">你选择了<span>{{list[num].tittle}}</span> </p>
</div>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
     new Vue({
         el:'#app',
         data:{
             num:0,
             list:[{
                 id:0,
                 tittle:'HTML'
             },{
                 id:1,
                 tittle:'CSS'
             },{
                 id:2,
                 tittle:'JavaScript'
             },{
                 id:3,
                 tittle:'Vue.js'
             }]
         },
         methods: {
             handel(index){
                 console.log(index);
                 this.num=index
             }
         },
     })
</script>