Vue常用指令

Vue常用指令：　　

1、v-text：只能用在双标签中，就是给元素的innerText赋值
2、v-html：类似于js中的innerHtml，可以解析标签

3、v-if : 判断是否插入这个元素,相当于对元素的销毁和创建

4、v-show：隐藏元素如果确定要隐藏, 会给元素的style加上display:none

5、v-if和v-show区别：`v-if` 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。`v-if` 也是**惰性的**：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。`v-show` 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。一般来说，`v-if` 有更高的切换开销，而 `v-show` 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 `v-show` 较好；如果在运行时条件很少改变，则使用 `v-if` 较好。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>常用指令1</title>
    </head>
    <body>
        <div id="app"> </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            template:`
                <div>
                    <div v-html = 'msg2'></div>
                    <div v-if = 'isShow'>啦啦啦啦</div>
                    <div v-show = 'isShow'></div>
                    <div v-if = 'Math.random() > 0.5'>
                        随机数大于0.5
                    </div>
                    <div v-else>
                        随机数小于0.5
                    </div>
                    <ul>
                        <li v-for = '(item,index) in menuLists'>
                            <h3>{{ index }}</h3>
                            <h5>{{item.name}}</h5>
                            <h4>{{item.price}}</h4>

                        </li>
                    </ul>
                    <ul>
                        <li v-for = '(value,key) in object'>
                            {{ key }} -- {{value}}
                        </li>
                    </ul>
                </div>
            `,
            data:function(){
                return {
                    msg:"vue常用指令",
                    msg2:"<h2>指令系统</h2>",
                    isShow:true,
                    menuLists:[
                        {id:1,name:'黄焖鸡',price:60},
                        {id:2,name:'宫保鸡丁',price:30},
                        {id:3,name:'麻婆豆腐',price:20}

                    ],
                    object:{
                        name:'周sir',
                        age:18,
                        fav:'唱歌'
                    }
                }
            }
        });
    </script>
</html>