vue写的 tab栏切换，vue栏目切换， vue导航栏切换

vue的tab切换原理：
1.通过设置变量判断calss类
2.通过点击事件返回一个index 索引
3.把变量等于点击事情返回的索引

				<style type="text/css">
			
				    ol>li {
			
				        float: left;
			
				        margin: 10px;
			
				        overflow: hidden;
			
				    }
			
				    ol>li.action {
			
				        background-color: red;
			
				    }
			
				    ul>li {
			
				        display: none;
			
				    }
			
				    ul>li.cun {
			
				        display: block;
			
				    }
			
				</style>
			
				<body>
			
				    <div class="app">
			
				        <ol>
			
				            <!-- // : 是代表 v-bind 绑定行内样式的 --> 
			
				            <!-- v-for循环 value 代表 循环的当前向 index 代表索引 --> 
			
				            <li :class="id == index? 'action':'' " v-for="value,index in list" v-text="value.title" @click="sum(index)"></li>
			
				        </ol>
			
				        <ul>
			
				            <li :class="id == index ? 'cun':''" v-for="value,index in list " v-text="value.content"></li>
			
				        </ul>
			
				    </div>
			
				    <script type="text/javascript" src="./js/vue.js"></script>
			
				    <script>
			
				        var vm = new Vue({
			
				            el: ".app",
			
				            data: {
			
				                id: 0, //定义的变量 
			
				                list: [{ //要循环的数据 
			
				                    title: '选项卡1',
			
				                    content: '111' 
			
				                }, {
			
				                    title: '选项卡2',
			
				                    content: '222' 
			
				                }, {
			
				                    title: '选项卡3',
			
				                    content: '333' 
			
				                }]
			
				            },
			
				            methods: {
			
				                sum: function(con) {
			
				                    //点击事件的返回值等于 id变量  
			
				                    this.id = con;
			
				                }
			
				            }
			
				        })
			
				    </script>