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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/vue.min.js"></script>
</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='score<60'>差</div>
        <div v-show='flag'>测试v-show</div>
        <button v-on:click="handle">点击</button>
    </div>


    <div id="appTwo">
        <div>水果列表</div>
        <ul>
            <li>===========v-for='item in fruits'================</li>
            <li v-for='item in fruits'>{{item}}</li>
            <li>===========v-for="(item, index) in fruits" :key="index"================</li>
            <li v-for="(item, index) in fruits" :key="index">{{item}} ========== {{index}}</li>
            <li v-for="(item, index) in myfruits" :key="index">
                <span>{{item.ename}}</span>
                <span>{{item.cname}}</span>
            </li>
        </ul>
    </div>

    <div id="app2">
        <div v-for='(value,key,index) in obj'>{{value + '======' + key +'======' + index}}</div>
        <div v-if="value==12" v-for='(value,key,index) in obj'>{{value + '======' + key +'======' + index}}</div>

    </div>
</body>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            score: 75,
            flag: false,
        },
        methods: {
            handle: function() {
                this.flag = !this.flag;
            }
        }
    })


    var vm2 = new Vue({
        el: '#appTwo',
        data: {
            fruits: [
                'apple', 'orange', 'banana'
            ],
            myfruits: [{
                    id: 1,
                    ename: 'apple',
                    cname: '苹果'
                }, {
                    id: 2,
                    ename: 'orange',
                    cname: '橘子'
                }, {
                    id: 3,
                    ename: 'banana',
                    cname: '香蕉'
                },

            ]
        },
        methods: {

        }
    })


    var vm3 = new Vue({
        el: "#app2",
        data: {
            obj: {
                uname: 'lisi',
                age: 12,
                gender: 'male'
            }
        },
        methods: function() {

        }
    })
</script>

</html>


<!--    p20
    1.分支结构
        -   v-if
        -   v-else
        -   v-else-if
        -   v-show    原理 控制元素的样式是否显示

    2.v-if与v-show的区别
        -   v-if控制元素是否渲染到页面
        -   v-show控制元素是否显示(已经渲染到了页面) 
    
        p21
    3.循环结构
        -   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}} + '----' + {{index}}</li>
    4.循环结构
        - v-for 遍历对象
            <div v-for='{value,key,index} in object'></div>
        
        - v-if 和 v-for结合使用
            <div v-if='value==12' v-for='{value,key,index} in obj' ></div>
-->