vue分支循環結構

分支結構

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

<div id="app">
    <div v-if='sorce>=90'>優秀</div>
    <div v-else-if="sorce>=60&&sorce<90">良好</div>
    <div v-else>不及格</div>
    <div v-show="flag">showTEST</div>
</div>

<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data:{
            sorce: 99,
            flag: false,
        },
        methods:{

        }
    })
</script>

循環結構

<div id="app">
    <ul>
        <li v-for="item in student">{{item}}</li>
        <li v-for="(item, index) in student">{{item}}+'--'+{{index}}</li> <!--帶索引遍歷-->
    </ul>
</div>

<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data:{
            student: ['張三','李四','王五'],
            flag: false,
        },
        methods:{

        }
    })
</script>