vue学习 条件、循环指令、computed、watch、局部、全局、组件间交互

1.条件指令

<div id="app">
    <p v-if="r1" key="p_r1">if条件</p>
    <p v-show="r2">show条件</p>
    <!--{{ num + 1 - 5 * 2 + '好的' }}-->
    
    <ul>
        <!--v-else会默认与v-if等有条件的分支绑定-->
        <!--v-else-if必须由条件才和有条件v-if分支绑定-->
        <li v-if="tag == 1">111</li>
        <li v-else-if="tag == 2">222</li>
        <li v-else>333</li>
    </ul>

    <ul>
        <li @click="action('a')">a</li>
        <li @click="action('b')">b</li>
        <li @click="action('c')">c</li>
    </ul>
    
    <ul>
        <li v-show="flag == 'a'">aaa</li>
        <li v-show="flag == 'b'">bbb</li>
        <li v-show="flag == 'c'">ccc</li>
    </ul>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            num: 10,
            r1: false,
            r2: false,
            tag: 2,
            flag: 'a'
        },
        methods: {
            action: function (s) {
                this.flag = s   //实现点击事件切换显示的数值
            }
        }
    })
</script>
1.条件指令

<div id="app">
    <p v-if="r1" key