list: [{
? ? ? id: 1,
? ? ? title: 'apple',
? ? ? path: 'images/蘋果.jpg'
? ? ? }, {
? ? ? ? ?id: 2,
? ? ? ? ?title: 'orange',
? ? ? ? ?path: 'images/橘子.jpg'
? ? ? }, {
? ? ? ? ?id: 3,
? ? ? ? ?title: 'lemon',
? ? ? ? ?path: 'images/檸檬.jpg'
? ? ? }]

然后通過v-for對這個數(shù)組進行遍歷，取到對應的title值

<li :key='item.id' v-for='(item,index) in list'>{{item.title}}</li>

對圖片也進行遍歷

<div :key='item.id' v-for='(item,index) in list'>
? ? ? <img src="item.path">
</div>

具體代碼如下

<!DOCTYPE html>
<html lang="en">

<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
? ? <style>
? ? ? ? .tab ul {
? ? ? ? ? ? overflow: hidden;
? ? ? ? ? ? padding: 0;
? ? ? ? ? ? margin: 0;
? ? ? ? }
? ? ? ??
? ? ? ? .tab ul li {
? ? ? ? ? ? box-sizing: border-box;
? ? ? ? ? ? padding: 0;
? ? ? ? ? ? float: left;
? ? ? ? ? ? width: 100px;
? ? ? ? ? ? height: 45px;
? ? ? ? ? ? line-height: 45px;
? ? ? ? ? ? list-style: none;
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? border-top: 1px solid blue;
? ? ? ? ? ? border-right: 1px solid blue;
? ? ? ? ? ? border-bottom: 1px solid blue;
? ? ? ? ? ? cursor: pointer;
? ? ? ? }
? ? ? ??
? ? ? ? .tab ul li:first-child {
? ? ? ? ? ? border-left: 1px solid blue;
? ? ? ? }
? ? ? ??
? ? ? ? .tab ul li.active {
? ? ? ? ? ? background-color: orange;
? ? ? ? }
? ? ? ??
? ? ? ? .tab div {
? ? ? ? ? ? width: 500px;
? ? ? ? ? ? height: 300px;
? ? ? ? ? ? display: none;
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? font-style: 30px;
? ? ? ? ? ? line-height: 300px;
? ? ? ? ? ? border: 1px solid blue;
? ? ? ? ? ? border-top: 0px;
? ? ? ? }
? ? ? ??
? ? ? ? .tab div.current {
? ? ? ? ? ? margin-top: 0px;
? ? ? ? ? ? width: 300px;
? ? ? ? ? ? height: 300px;
? ? ? ? ? ? display: block;
? ? ? ? }
? ? ? ??
? ? ? ? img {
? ? ? ? ? ? width: 300px;
? ? ? ? ? ? height: 300px;
? ? ? ? }
? ? </style>
</head>

<body>
? ? <div id="app">
? ? ? ? <div class="tab">
? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? <li v-on:click='change(index)' :class='currentIndex==index?" active":""' :key='item.id' v-for='(item,index) in list'>{{item.title}}</li>

? ? ? ? ? ? </ul>
? ? ? ? ? ? <div :class='currentIndex==index?"current":""' :key='item.id' v-for='(item,index) in list'>
? ? ? ? ? ? ? ? <img :src="item.path">
? ? ? ? ? ? </div>
? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? <img src="images/檸檬.jpg">
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? </div>
? ? <script type="text/javascript" src="js/vue.js"></script>
? ? <script type="text/javascript">
? ? ? ? var vm = new Vue({
? ? ? ? ? ? el: '#app',
? ? ? ? ? ? /*數(shù)據(jù)*/
? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? currentIndex: 0,
? ? ? ? ? ? ? ? /*當前索引*/
? ? ? ? ? ? ? ? list: [{
? ? ? ? ? ? ? ? ? ? id: 1,
? ? ? ? ? ? ? ? ? ? title: 'apple',
? ? ? ? ? ? ? ? ? ? path: 'images/蘋果.jpg'
? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? id: 2,
? ? ? ? ? ? ? ? ? ? title: 'orange',
? ? ? ? ? ? ? ? ? ? path: 'images/橘子.jpg'
? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? id: 3,
? ? ? ? ? ? ? ? ? ? title: 'lemon',
? ? ? ? ? ? ? ? ? ? path: 'images/檸檬.jpg'
? ? ? ? ? ? ? ? }]
? ? ? ? ? ? },

? ? ? ? ? ? /*js控制邏輯*/
? ? ? ? ? ? methods: {
? ? ? ? ? ? ? ? // 在這里實現(xiàn)選項卡切換操作：本質(zhì)就是操作類名
? ? ? ? ? ? ? ? // 如何操作類名？就是通過currentIndex
? ? ? ? ? ? ? ? change: function(index) {
? ? ? ? ? ? ? ? ? ? this.currentIndex = index
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
? ? </script>
</body>

</html>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: