vue实用小实例

一个简单的vue小实例

效果如图

代码如下：

<template>
    <div class="index">
        <h1>{
  {title}} </h1>
        <router-link :to="{name:'main'}">
            <p>
                跳转main
            </p>
        </router-link>
       <div class="header">
           <ul>
                <li @click="tab=1" :class="{'active':tab===1}">第一</li>
                <li @click="tab=2" :class="{'active':tab===2}">第二</li>
                <li @click="tab=3" :class="{'active':tab===3}">第三</li>
                <li @click="tab=4" :class="{'active':tab===4}">第四</li>
                <li @click="tab=5" :class="{'active':tab===5}">第五</li>
           </ul>
       </div>
       <div class="main">
           <div v-show="tab==1" class="m-list">
               <p>我是一</p>
               <div>
                    <img src="../../assets/05.jpg" alt="">
                    <im