当前位置：首页 > article >正文

Vue 响应式渲染 - 指令

article 2025/3/1 14:19:39

Vue 渐进式JavaScript 框架基于Vue2的学习笔记 - Vue 响应式渲染 - 指令

指令

介绍

缩写

指令示例

总结

指令

介绍

指令：是指带有v-前缀的特殊属性

v-bind 动态绑定属性

v-if 动态创建/删除

v-show 动态显示/隐藏

v-on:click 绑定事件

v-for 遍历

v-model 双向绑定表单

缩写

v-bind:src => :src

v-on:click => @click

指令示例

使用v-show与v-if指令分别实现动态显示和隐藏。

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide {
            display: none;
        }
    </style>
    <script src="../lib/vue.js"></script>
</head>
<body>
<div id="box">
    <button @click="clickHandle()">button</button>
    <div v-show="isShow">动态显示和隐藏-指令</div>
    <div v-if="isCreate">动态创建和删除-指令</div>
</div>
<script>
    new Vue({
        el: "#box", // element
        data: {
            isHide: false,
            isShow: true,
            isCreate: true
        },
        methods: {
            clickHandle() {
                console.log('点击了按钮')
                this.isShow = !this.isShow
                this.isCreate = !this.isCreate
            }
        }
    })
</script>
</body>
</html>

效果：