vue指令大全

闲来无事，最近在总结笔记，也买了一本vue入的书，总结一下知识点

指令：

 v-on指令

作用：为HTML元素绑定事件监听

语法：v-on：事件名称='函数名称()'

简写语法：@事件名称='函数名称()'

注：函数定义在methods配置项中

练习指令 对数组的增删 

截图代码

v-show指令

作用：控制切换一个元素的显示和隐藏display属性控制

语法：v-show=表达式

根据表达式结果的真假，确定是否显示当前元素

true表示显示该元素；false表示隐藏该元素

<div id="box">
    <div style="width: 100px;height: 100px;background: black;display: none" v-show="show"></div>
</div>
</body>
<script>
    new Vue({
        el: "#box",
        data(){
            return {
                show: true
            }
        }
    })
</script>

v-if显示与隐藏  （dom元素的删除添加  推荐使用v-show）

<div id="box">
    <div style="width: 100px;height: 100px;background: black;" v-if="show"></div>
    <div style="width: 300px;height: 300px;background: blue" v-else=""></div