Vue—条件、循环指令

条件指令

知识回顾：

挂载点成员el尽量使用id，因为一个实例永远只配对一个标签，不能用‘*’通配选择器，第一个找的就是html，html不能作为挂载点，我们尽量从body下面的结构，自己写的标签用id作业挂载点，Vue实例本质上实在操作虚拟Dom,虚拟Dom操作完映射到真实Dom上面去，会把真实的Dom替换掉，等于把body替换掉，所以不能让挂载点放在body里

这里面关键字变量true和false是可以被解析的

这里面可以做运算也可以拼接，可以做写js代码，但是不介意在插值表达式这么做，只能做简单的操作

如果改为普通的变量就会报没有定义的错，需要在data里面定义

这里111,222，都是true第一个成立了就不会继续往下看了，如果是===就是假

v-esle会默认与v-if等有条件的分支绑定

v-else-if必须有条件才和有条件的v-if分支绑定

 <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>

通过控制点击标签控制页面变化小实例

按上面a下面会变成aaa

循环指令

前提是数组里面一定要有值，如果要显示出索引需要给num加括号逗号索引

字典for循环

值是无序的，key是有序的，如果不知道括号里面再加东西不会报错

Vue中的留言板

注意这里的函数名del不能是关键字参数delete

如果是pop的话默认删的是最后一个

需要用splice删除，splice默认有三个参数

<body>
<div id="app">
   <p> <input type="text" v-model="val">
    <button @click="add(val)">评论</button></p>
    <ul>
        <li v-for="(info,i) in infos">{{ info }} <span @click="del(i)">x</span></li>
    </ul>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            infos:[],
            val:''
        },
        methods:{
            del:function (i) {
                this.infos.splice(i,1)
            },
            add:function () {
                let val = this.val;
                if (this.val){
                    this.infos.splice(0,0,val);
                    val=''
                }
            }
        }
    })
</script>

v-model就能拿到用户输入的文本，然后再加入评论的函数名加个val参数，然后再add方法里面做判断，如果填的有值还给他加进infos数组里面for循环到页面上，然后并且清空val的值