vue2.0导航菜单切换

来源：互联网发布：js classname 编辑：程序博客网时间：2024/06/08 19:17

css

*{    margin:0;    padding: 0;  }  ul li{    list-style: none;  }  .navul{    margin:100px auto 20px;    overflow: hidden;  }  .navul li{    background-color: #5597b4;    padding:18px 30px;    float:left;    color: #fff;    font-size: 18px;    cursor: pointer;  }  .active{    background-color: #5597b4;  }  .home .home,.new .new,.contact .contact,.service .service{    background-color: skyblue;  }  .checked{       background: #eff4f7;   }

第一种写法

通过当前元素的下标对应当前点击的元素

html

<div id="nav">        <ul>            <li v-for="(relation,index) in relations" v-bind:id="relation.id"  v-bind:id="relation.id" v-bind:class="{checked:index==nowIndex}"  v-on:click="relationClick(index)">                <i></i>                <span class="">{{relation.text}}</span>            </li>        </ul>    </div>

<script src="js/vue.js" charset="utf-8"></script>  <script type="text/javascript">    var nav = new Vue({      el:'#nav',      data:{        relations: [          {text:'项目',id:'program'},          {text:'人员',id:'person'},          {text:'机构',id:'organization'},          {text:'技术',id:'tech'},          {text:'地区',id:'location'},          {text:'国家',id:'country'}        ],        nowIndex:-1,      },      methods:{        relationClick:function(index){          this.nowIndex=index;        }      }    });  </script>

第二种写法

通过每条数据的特有属性（例如，例子中的id属性），点击传不同的参，对应当前点击元素。

html

<div id="nav">  <ul>    <li v-for="(relation,index) in relations" v-bind:id="relation.id" v-bind:id="relation.id" v-bind:class="{checked:relation.id==nowId}" v-on:click="relationClick(relation)">      <i></i>      <span class="">{{relation.text}}</span>    </li>  </ul></div>

js：

<script type="text/javascript">      var nav = new Vue({        el:'#nav',        data:{          relations: [            {text:'项目',id:'program'},            {text:'人员',id:'person'},            {text:'机构',id:'organization'},            {text:'技术',id:'tech'},            {text:'地区',id:'location'},            {text:'国家',id:'country'}          ],          nowId:'',        },        methods:{          relationClick:function(item){            this.nowId=item.id;          }        }      });    </script>

0 0