指令

最新推荐文章于 2023-12-29 15:24:35 发布

秃头的科比

最新推荐文章于 2023-12-29 15:24:35 发布

阅读量180

点赞数

分类专栏： VUE 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_43933771/article/details/120246747

版权

本文详细介绍了Vue.js中的常用指令，如v-bind、v-on、v-model、v-for、v-if、v-show等，并探讨了特殊指令v-once、v-html、v-pre的用法。同时，文章深入讲解了如何创建自定义指令，包括局部指令和全局指令，并给出了具体的实现案例。此外，还阐述了自定义指令的生命周期和参数修饰符，以及如何应对时间戳显示的需求。

摘要由CSDN通过智能技术生成

指令的使用

常用指令

（1）v-bind：动态绑定属性或者样式：动态绑定class—对象语法

<div :class="className">哈哈哈哈</div>

<!-- 对象语法: {'active': boolean} -->
<div :class="{'active': isActive}">呵呵呵呵</div>

<!-- 也可以有多个键值对 -->
<div :class="{active: isActive, title: true}">呵呵呵呵</div>

<!-- 默认的class和动态的class结合 -->
<div class="abc cba" :class="{active: isActive, title: true}">
    呵呵呵呵
</div>

<!-- 将对象放到一个单独的属性中 -->
<div class="abc cba" :class="classObj">呵呵呵呵</div>

<!-- 将返回的对象放到一个methods(computed)方法中 -->
<div class="abc cba" :class="getClassObj()">呵呵呵呵</div>   

data() {
    return {
        className: "why",
        isActive: true,
        title: "abc",
        classObj: { 
            active: true, 
            title: true 
        },
    };
},
    methods: {
            getClassObj() {
                return { 
                    active: true, 
                    title: true 
                }
            }
    },

动态绑定class—数组语法

<template id="my-app">
<div :class="['abc', title]">哈哈哈哈</div>
<div :class="['abc', title, isActive ? 'active': '']">哈哈哈哈</div>
<div :class="['abc', title, {active: isActive}]">哈哈哈哈</div>
</template>

<script src="../js/vue.js"></script>
<script>
    const App = {
        template: '#my-app',
        data() {
            return {
                message: "Hello World",
                title: "cba",
                isActive: true
            }
        }
    }

    Vue.createApp(App).mount('#app');
</script>

（2）v-on：用于绑定事件，其常用修饰符有：

.stop：它其实调用的是event.stopPropagation()

.prevent：它其实调用的是event.preventDefault()

.once：只触发一次回调。

事件的参数传递：

<template id="my-app">
	<!-- 默认传入event对象, 可以在方法中获取 -->
	<button @click="btn1Click">按钮1</button>

	<!-- $event可以获取到事件发生时的事件对象 -->
	<button @click="btn2Click($event, 'coderwhy', 18)">按钮2</button>
</template>

<script src="../js/vue.js"></script>
<script>
    const App = {
        template: '#my-app',
        data()