Vue分支迴圈結構~非常詳細哦

阿新 • • 發佈：2021-01-23

技術標籤：Vue

文章目錄

- - 分支迴圈結構

分支迴圈結構

分支結構

v-if
v-else
v-else-if

v-show：v-show的原理:控制元素樣式是否顯示display : none

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=" 
width=device-width, initial-scale=1.0">
    <title>分支結構</title>
</head>
<body>
    <div id="app">
        <div v-if='score>=90'>優秀</div>
        <div v-else-if='score<90&&score>=80'>良好</div>
        <div v-else-if='score<80&&score>=60' 
>一般</div>
        <div v-else>差</div>
        <div v-show='flag'>測試v-show</div>
        <button v-on:click='handle'>點選</button>
    </div>
    <script src="js/vue.js"></script>
    <script>
        /*
            v-show的原理:控制元素樣式是否顯示display : none
        */ 
 
        var vm = new Vue({
            // el：告訴vue把資料插入到哪個位置
            el: "#app",
            // data: 提供資料
            data: {
                score: 100,
                flag: false
                  
            },
            methods: {
                handle: function(){
                    // 取反
                    this.flag = !this.flag;
                }
            }
        })
    </script>
</body>
</html>

v-if與v-show的區別

v-if控制元素是否渲染到頁面
v-show控制元素是否顯示（已經渲染到了頁面)

迴圈結構

v-for遍歷陣列

<li v-for=' item in list '>{{item} }</ li>

<li v-for='(item, index) in list'>{ {item} } + '---' +{ {index} }</li>

key的作用︰幫助Vue區分不同的元素，從而提高效能

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

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>迴圈結構</title>
</head>
<body>
    <div id="app">
        <h3>水果列表</h3>
        <ul>
            <!-- 
                item 迴圈變數
                in 關鍵字
                fruits 你要遍歷的資料結構
             -->
            <li v-for='item in fruits'>{{item}}</li>
            <!-- index關鍵字 - 顯示索引 -->
            <!-- <li v-for='(item,index) in fruits'>{{item + '----' + index}}</li> -->
            
            <li v-for='(item,index) in fruits'>{{item + '----' + index}}</li>


<!--             <li v-for='item in myFruites'>
                <span>{{item.ename}}</span>
                <span>----</span>
                <span>{{item.cname}}</span>
            </li> -->

            <!-- 使用key關鍵字: 與上面的結果是一樣的，但是可以提高效能 -->
            <li :key='item.id' v-for='(item,index) in myFruites'>
                <span>{{item.ename}}</span>
                <span>----</span>
                <span>{{item.cname}}</span>
            </li>

        </ul>  
    </div>
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            // el：告訴vue把資料插入到哪個位置
            el: "#app",
            // data: 提供資料
            data: {
                fruits: ['apple','orange','banana'],
                myFruites: [{
                    id:1,
                    ename: 'apple',
                    cname: '蘋果'
                },
                {
                    id:2,
                    ename: 'banana',
                    cname: '香蕉'
                },
                {
                    id:3,
                    ename: 'orange',
                    cname: '橘子'
                }]
            }
        })
    </script>
</body>
</html>

v-for遍歷物件

值鍵索引這個順序是不能變的，變數名可以自定義

<div v-for=' ( value,key,index) in object'></ div>

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>迴圈結構</title>
</head>
<body>
    <div id="app">
      <!-- 值 鍵 索引 這個順序是不能變的，變數名可以自定義 -->
      <div v-for='(v,k,i) in obj'>{{v + '---' + k + '---' + i}}</div>
    </div>
    <script src="js/vue.js"></script>
    <script>
        // 使用原生js遍歷物件
        var obj = {
            uname: 'lisi',
            age: 12,
            gender: 'male'
        }

        for (var key in obj) {
            console.log(key, obj[key])
        }

        // 
        var vm = new Vue({
            // el：告訴vue把資料插入到哪個位置
            el: "#app",
            // data: 提供資料
            data: {
                obj : {
                uname: 'lisi',
                age: 12,
                gender: 'male'
        }
            }
        })
    </script>
</body>
</html>

在這裡插入圖片描述

v-for遍歷物件

<div v-if='value==12' v-for='(value,key,index) in object'></div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>迴圈結構</title>
</head>
<body>
    <div id="app">
      <!-- 值 鍵 索引 這個順序是不能變的，變數名可以自定義 -->
      <!-- <div v-for='(v,k,i) in obj'>{{v + '---' + k + '---' + i}}</div> -->
      <!-- 只有符合if條件的資料才能被遍歷 -->
      <div v-if='v===13' v-for='(v,k,i) in obj'>{{v + '---' + k + '---' + i}}</div>
    </div>
    <script src="js/vue.js"></script>
    <script>
        // 使用原生js遍歷物件
        var obj = {
            uname: 'lisi',
            age: 12,
            gender: 'male'
        }

        for (var key in obj) {
            console.log(key, obj[key])
        }

        // 
        var vm = new Vue({
            // el：告訴vue把資料插入到哪個位置
            el: "#app",
            // data: 提供資料
            data: {
                obj : {
                uname: 'lisi',
                age: 13,
                gender: 'male'
        }
            }
        })
    </script>
</body>
</html>