无码人妻丰满熟妇啪啪欧美,风流寡妇电影,小荡货你夹的老师好紧

希望每一位同學可以親自將每行代碼進行一次嘗試！記得對于學習代碼來講慢慢來才會更快！

現在咱們先拋開vuex，一起來做一個如上圖一樣的切換案例：

<template>
    <div id="app">
        <!--點擊此按鈕index變為0,并讓此按鈕應用上樣式active-->
       <input type="button" value="vue" :class="{active:index==0}" @click="index=0">
        <!--點擊此按鈕index變為1,并讓此按鈕應用上樣式active-->
       <input type="button" value="es6" :class="{active:index==1}" @click="index=1">
        <!--點擊此按鈕index變為2,并讓此按鈕應用上樣式active-->
       <input type="button" value="node" :class="{active:index==2}" @click="index=2">
        <!--當index為0時顯示此DIV-->
        <div v-show="index==0">
            <p><a >利用Vue-cli中的proxyTable解決開發環境的跨域問題</a></p>
            <p><a >真正掌握vuex的使用方法（一）</a></p>
            <p><a >真正掌握vuex的使用方法（二）</a></p>
            <p><a >真正掌握vuex的使用方法（三）</a></p>
            <p><a >真正掌握vuex的使用方法（四）</a></p>
        </div>
        <!--當index為1時顯示此DIV-->
        <div v-show="index==1">
            <p><a >es6箭頭函數的理解及面試題</a></p>
            <p><a >es6中class類的全方面理解（三）——靜態方法</a></p>
            <p><a >es6中class類的全方面理解（二）——繼承</a></p>
            <p><a >es6中class類的全方面理解（一）</a></p>
            <p><a >es6中的模塊化</a></p>
        </div>
        <!--當index為2時顯示此DIV-->
        <div v-show="index==2">
            <p><a >如何通過node.js對數據進行MD5加密</a></p>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'App',
        data(){
            return {
                //index用于記錄當前所選按鈕的位置，值會根據點擊按鈕的不同而變化
                index:0
            }
        }
    }
</script>
<style>
    #app input,#app p{
        margin:5px;
        padding:5px;
    }
    #app input.active{
        background:red;
    }
    #app div{
        border:1px solid red;
    }
</style>

上面的代碼并不復雜，相信大家也都可以看的明白。通過以上代碼咱們可以實現一個簡單的切換，通過這種形式來完成的切換可以稱其為乞丐版的切換。因為里面的數據都被寫死了！所以咱們可以將代碼進行一些優化，將數據單獨存放起來進行管理：
首先將所有的數據放到data中：

data(){
    return {
        tagList:[
            {
                tagName:"vue",//按鈕的名字
                newList:[//vue新聞的內容列表
                    {
                        newTitle:"利用Vue-cli中的proxyTable解決開發環境的跨域問題",
                        newHref:"https://zhangpeiyue.com/archives/101"
                    },
                    {
                        newTitle:"真正掌握vuex的使用方法（一）",
                        newHref:"https://zhangpeiyue.com/archives/120"
                    },
                    {
                        newTitle:"真正掌握vuex的使用方法（二）",
                        newHref:"https://zhangpeiyue.com/archives/122"
                    },
                    {
                        newTitle:"真正掌握vuex的使用方法（三）",
                        newHref:"https://zhangpeiyue.com/archives/126"
                    },
                    {
                        newTitle:"真正掌握vuex的使用方法（四）",
                        newHref:"https://zhangpeiyue.com/archives/127"
                    }
                ]
            },
            {
                tagName:"es6",//按鈕的名字
                newList:[//es6新聞的內容列表
                    {
                        newTitle:"es6箭頭函數的理解及面試題",
                        newHref:"https://zhangpeiyue.com/archives/92"
                    },
                    {
                        newTitle:"es6中class類的全方面理解（三）——靜態方法",
                        newHref:"https://zhangpeiyue.com/archives/88"
                    },
                    {
                        newTitle:"es6中class類的全方面理解（二）——繼承",
                        newHref:"https://zhangpeiyue.com/archives/86"
                    },
                    {
                        newTitle:"es6中class類的全方面理解（一）",
                        newHref:"https://zhangpeiyue.com/archives/83"
                    },
                    {
                        newTitle:"es6中的模塊化",
                        newHref:"https://zhangpeiyue.com/archives/72"
                    }
                ]
            },
            {
                tagName:"node",//按鈕的名字
                newList:[//node新聞的內容列表
                    {
                        newTitle:"如何通過node.js對數據進行MD5加密",
                        newHref:"https://zhangpeiyue.com/archives/118"
                    }
                ]
            }
        ],
        //index用于記錄當前所選按鈕的位置，值會根據點擊按鈕的不同而變化
        index:0
    }
}

然后再將template進行修改

<div id="app">
    <!--對按鈕進行遍歷-->
   <input type="button" v-for="(item,i) in tagList" :value="item.tagName" :class="{active:i==index}" @click="index=i">
    <!--對新聞進行遍歷-->
    <div v-for="(item,i) in tagList" v-show="i==index">
        <p v-for="info in item.newList"><a :href="info.newHref">{{info.newTitle}}</a></p>
    </div>
</div>

最后運行項目，如你所愿，正常運行，一切都是那么美好！
就目前來講這些數據都已經被單獨存放起來了，不過做到這樣還遠遠不夠，因為不管是按鈕的文字還是新聞的內容正常來講都是來自于后臺人員提供的接口。所以咱們還要繼續調整！
首先創建一個server.js，創建一個基于express的node服務來提供接口：

var express=require("express");
var app=express();
app.get("/getTagList",function(req,res){
    res.json([
        {
            tagName:"vue",
            newList:[
                {
                    newTitle:"利用Vue-cli中的proxyTable解決開發環境的跨域問題",
                    newHref:"https://zhangpeiyue.com/archives/101"
                },
                {
                    newTitle:"真正掌握vuex的使用方法（一）",
                    newHref:"https://zhangpeiyue.com/archives/120"
                },
                {
                    newTitle:"真正掌握vuex的使用方法（二）",
                    newHref:"https://zhangpeiyue.com/archives/122"
                },
                {
                    newTitle:"真正掌握vuex的使用方法（三）",
                    newHref:"https://zhangpeiyue.com/archives/126"
                },
                {
                    newTitle:"真正掌握vuex的使用方法（四）",
                    newHref:"https://zhangpeiyue.com/archives/127"
                }
            ]
        },
        {
            tagName:"es6",
            newList:[
                {
                    newTitle:"es6箭頭函數的理解及面試題",
                    newHref:"https://zhangpeiyue.com/archives/92"
                },
                {
                    newTitle:"es6中class類的全方面理解（三）——靜態方法",
                    newHref:"https://zhangpeiyue.com/archives/88"
                },
                {
                    newTitle:"es6中class類的全方面理解（二）——繼承",
                    newHref:"https://zhangpeiyue.com/archives/86"
                },
                {
                    newTitle:"es6中class類的全方面理解（一）",
                    newHref:"https://zhangpeiyue.com/archives/83"
                },
                {
                    newTitle:"es6中的模塊化",
                    newHref:"https://zhangpeiyue.com/archives/72"
                }
            ]
        },
        {
            tagName:"node",
            newList:[
                {
                    newTitle:"如何通過node.js對數據進行MD5加密",
                    newHref:"https://zhangpeiyue.com/archives/118"
                }
            ]
        }
    ]);
});
app.listen(80,function(){
    console.log("開啟服務成功");
})

node server.js將服務開啟。
通過設置proxyTable來解決開發環境中的跨域問題：

proxyTable: {
    "/api":{
        target:"http://127.0.0.1",//訪問的服務器地址
        changeOrigin:true,//true為開啟代理
        pathRewrite:{
            '^/api': ''//路徑的替換規則
        }
    }
},

在App.vue中引入axios：

import axios from "axios";

在mounted周期函數中，通過axios來調用接口，改變tagList的值：

mounted(){
    axios.get("api/getTagList")
        .then(data=>{
            this.tagList=data.data;
        })
}

最后App.vue的內容：

<template>
<div id="app">
    <!--對按鈕進行遍歷-->
   <input type="button" v-for="(item,i) in tagList" :value="item.tagName" :class="{active:i==index}" @click="index=i">
    <!--對新聞進行遍歷-->
    <div v-for="(item,i) in tagList" v-show="i==index">
        <p v-for="info in item.newList"><a :href="info.newHref">{{info.newTitle}}</a></p>
    </div>
</div>
</template>
<script>
    import axios from "axios";
    export default {
        name: 'App',
        data(){
            return {
                tagList:[],
                //index用于記錄當前所選按鈕的位置，值會根據點擊按鈕的不同而變化
                index:0
            }
        },
        mounted(){
            axios.get("api/getTagList")
                .then(data=>{
                    this.tagList=data.data;
                })
        }
    }
</script>
<style>
    #app input,#app p{
        margin:5px;
        padding:5px;
    }
    #app input.active{
        background:red;
    }
    #app div{
        border:1px solid red;
    }
</style>

一切都是那么的自然！
如果對node不是特別了解的同學，可以在static文件夾內創建一個名字叫tagList的json文件，用于存儲數據值。

[
    {
        "tagName": "vue",
        "newList": [
            {
                "newTitle": "利用Vue-cli中的proxyTable解決開發環境的跨域問題",
                "newHref": "https://zhangpeiyue.com/archives/101"
            },
            {
                "newTitle": "真正掌握vuex的使用方法（一）",
                "newHref": "https://zhangpeiyue.com/archives/120"
            },
            {
                "newTitle": "真正掌握vuex的使用方法（二）",
                "newHref": "https://zhangpeiyue.com/archives/122"
            },
            {
                "newHref": "https://zhangpeiyue.com/archives/126"
            },
            {
                "newTitle": "真正掌握vuex的使用方法（四）",
                "newHref": "https://zhangpeiyue.com/archives/127"
            }
        ]
    },
    {
        "tagName": "es6",
        "newList": [
            {
                "newTitle": "es6箭頭函數的理解及面試題",
                "newHref": "https://zhangpeiyue.com/archives/92"
            },
            {
                "newTitle": "es6中class類的全方面理解（三）——靜態方法",
                "newHref": "https://zhangpeiyue.com/archives/88"
            },
            {
                "newTitle": "es6中class類的全方面理解（二）——繼承",
                "newHref": "https://zhangpeiyue.com/archives/86"
            },
            {
                "newTitle": "es6中class類的全方面理解（一）",
                "newHref": "https://zhangpeiyue.com/archives/83"
            },
            {
                "newTitle": "es6中的模塊化",
                "newHref": "https://zhangpeiyue.com/archives/72"
            }
        ]},
    {
        "tagName":"node",
        "newList":[
            {
                "newTitle":"如何通過node.js對數據進行MD5加密",
                "newHref":"https://zhangpeiyue.com/archives/118"
            }
        ]
    }
]

然后將mounted函數中調取的接口地址調整為"/static/tagList.json"即可：

mounted(){
    axios.get("/static/tagList.json")
        .then(data=>{
            this.tagList=data.data;
        })
}

今天就到這里吧，在下篇文章當中將會針對于這個案例咱們采用vuex來實現！

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

真正掌握vuex的使用方法（五）

真正掌握vuex的使用方法（五）

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

真正掌握vuex的使用方法（五）

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频