Vue入門基礎（for 指令）

時間  2019-12-22
標籤 vue 入門 基礎 指令 简体版
原文   原文鏈接

for.htmljavascript

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

<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Insert title here</title>
</head>

<body>
    <div id="vue-app-for">
        <h1>for 指令 直接引用</h1>
        <!--直接引用-->
        {{arrays[0]}}
        {{arrays[1]}}
        {{arrays[2]}}
        {{arrays[3]}}
        {{arrays[4]}}

        <h1>for 指令 遍歷數組</h1>
        <ul>
            <!-- for each 遍歷數組-->
            <li v-for="obj in arrays">
                {{obj}}
            </li>
        </ul>

        <ul>
            <!-- for each 遍歷數組-->
            <li v-for="obj in arrays">
                {{obj}}
            </li>
        </ul>

        <ul>
            <!-- for each 遍歷數組 帶下標-->
            <li v-for="(obj,index) in arrays">
                {{index}} {{obj}}
            </li>
        </ul>

        <h1>for 指令 遍歷對象數組</h1>
        <ul>
            <!-- for each 遍歷數組-->
            <li v-for="(obj,index) in users">
                {{index}} {{obj.name}} {{obj.age}}
            </li>
        </ul>
        <!--template 能夠做爲容器標籤  不會渲染到dom中-->
        <template v-for="(obj,index) in users">
            <h3> {{index}} {{obj.name}}</h3>
            <p>{{obj.age}}</p>
        </template>

        <h1>for 指令 遍歷對象</h1>
        <!--template 能夠做爲容器標籤  不會渲染到dom中-->
        <template v-for="(user,index) in users">
            <div v-for="(val,key) in user">
                <p>{{key}} -{{val}}</p>
            </div>
        </template>
    </div>

</body>
<script src="for.js">
</script>

</html>

for.jshtml

new Vue({
    el: '#vue-app-for',
    data() {
        return {
            arrays: ['孫悟空', '豬八戒', '沙悟淨', '白龍馬', '唐三藏'],
            users: [
                { name: '孫悟空', age: '500' },
                { name: '豬八戒', age: '400' },
                { name: '沙悟淨', age: '300' },
                { name: '白龍馬', age: '200' },
                { name: '唐三藏', age: '20' }
            ]
        }
    },
    methods: {

    },
    computed: { //computerd裏的方法都須要return值

    }
});

頁面效果vue

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程