分支循环

分支循环使用方法:

<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>
-------------------------------------------------------------------------
           <!-- v-if和v-for可以结合使用 -->
           <!--  v-if='v==13'根据数组的值来遍历  如果值等于13才会进行遍历  -->
<div v-if='v==13' v-for='(v,k,i) in obj'>{{v + '----' + k + '----' + i}}</div>
<!-- 打印的是13--age--2因为只有age才符合判断条件 -->

    </div>



    <!-- v-if和v-for可以结合使用 -->
    <!-- <div v-if='value==12' v-for='(value,key,index) in obj'></div> -->



    <!-- 分支循环结构 -->
    <!-- v-if
         v-else
         v-else-if
         v-show 原理:控制元素的样式是否显示隐藏 内部会默认为false不显示 -->


    <script type="text/javascript" src="/vue.js"></script>
    <script type="text/javascript">
    // Vue第一个字母必须大写
    var vm = new Vue({
        el:'#app',
        data:{
            score:99,
            flag:false,
            obj:{
                uname:'lisi',
                age:'13',
                gender:'male'
            }
        },
        methods:{
            handle: function() {
                this.flag = true
             }
        }
    })
    </script>
</body>

 

posted @ 2020-08-29 19:22  彬戈戎马  阅读(143)  评论(0编辑  收藏  举报