JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="main">
         <nav @click="navigate">
            <li>
                <div>JS應用範例</div>
                <ul>
                    <li><a id="Calculator">計算機</a></li>
                </ul>
                <div>jQuery練習</div>
                <ul>
                    <li><a id="JSON">JSON資料處理</a></li>
                </ul>
                <div>Vue.js練習</div>
                <ul></ul>
                <div>PHP整合應用</div>
                <ul>
                    <li id="SingUp">註冊</li>
                    <li id="Login">登入</li>
                    <li id="reCAPTCHA">Google驗證</li>
                    <li id="get_client_ip">取得客戶端IP</li>
                </ul>
            </li>
        </nav>
        <div v-html="content">
            <!-- 把用ajax撈回來的資料渲染到這裡 -->
        </div>
    </div>

JavaScript

var vue = new Vue({
            el: '#main',
            data: {
                content: "請選擇左邊項目"
            },
            methods: {
                navigate: function (e) {
                    var url,data;

                    switch (e.target.id) {
                        case "Calculator":
                            url = "page1.html";
                            break;
                    }
										var vm = this;
                    axios.get(url)
                        .then(function (response) {
                            data = response.data;
                            vm.content = data;
                        })
                        .catch(function (error) {
                        });

                     //將利用axios插件的get取得的網頁資料指定到content上
                    //this.content = data;
                }
            }
        })