VUE自定义指令

最新推荐文章于 2023-06-06 20:38:42 发布

吃瓜的阳大王

最新推荐文章于 2023-06-06 20:38:42 发布

阅读量218

点赞数

文章标签： vue vue.js html5

本文链接：https://blog.csdn.net/qq_44822110/article/details/104782868

版权

VUE自定义指令

Vue.directive 自定义指令

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义指令</title>
    <style>
        .card {
            width: 200px;
            background-color: #ccc;
            padding: 10px;
            margin: 5px;
        }
    </style>
</head>

<body>
    <div id="seg1">
        <div v-pin="card1.pinned" class="card">
            <button @click="card1.pinned=!card1.pinned">定住/取消</button>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat accusamus hic consequuntur quos ab placeat
            quibusdam libero voluptates facilis aliquam id, tempora quas explicabo, commodi atque ex dolorem iure
            quidem.
        </div>
        <div v-pin="card2.pinned" class="card">
            <!-- <button @click="card1.pinned=!card1.pinned">定住/取消</button> -->
            <a @click="card2.pinned=!card2.pinned" href="#">定住/取消</a>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat accusamus hic consequuntur quos ab placeat
            quibusdam libero voluptates facilis aliquam id, tempora quas explicabo, commodi atque ex dolorem iure
            quidem.
        </div>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veritatis suscipit molestias beatae enim sapiente quod
        officiis pariatur. Velit tenetur vitae molestiae deleniti illo? Commodi omnis nobis obcaecati totam iste ab.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis, et rem quasi adipisci beatae cupiditate
        sapiente. Doloribus velit sequi omnis reiciendis repudiandae quod porro rem a dolores itaque. Blanditiis, a?
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veritatis suscipit molestias beatae enim sapiente quod
        officiis pariatur. Velit tenetur vitae molestiae deleniti illo? Commodi omnis nobis obcaecati totam iste ab.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis, et rem quasi adipisci beatae cupiditate
        sapiente. Doloribus velit sequi omnis reiciendis repudiandae quod porro rem a dolores itaque. Blanditiis, a?
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veritatis suscipit molestias beatae enim sapiente quod
        officiis pariatur. Velit tenetur vitae molestiae deleniti illo? Commodi omnis nobis obcaecati totam iste ab.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis, et rem quasi adipisci beatae cupiditate
        sapiente. Doloribus velit sequi omnis reiciendis repudiandae quod porro rem a dolores itaque. Blanditiis, a?
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veritatis suscipit molestias beatae enim sapiente quod
        officiis pariatur. Velit tenetur vitae molestiae deleniti illo? Commodi omnis nobis obcaecati totam iste ab.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis, et rem quasi adipisci beatae cupiditate
        sapiente. Doloribus velit sequi omnis reiciendis repudiandae quod porro rem a dolores itaque. Blanditiis, a?
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veritatis suscipit molestias beatae enim sapiente quod
        officiis pariatur. Velit tenetur vitae molestiae deleniti illo? Commodi omnis nobis obcaecati totam iste ab.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis, et rem quasi adipisci beatae cupiditate
        sapiente. Doloribus velit sequi omnis reiciendis repudiandae quod porro rem a dolores itaque. Blanditiis, a?
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veritatis suscipit molestias beatae enim sapiente quod
        officiis pariatur. Velit tenetur vitae molestiae deleniti illo? Commodi omnis nobis obcaecati totam iste ab.

    </div>
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
    <script src="index.js"></script>
</body>

</html>

JS

//pin就是HTML页面的v-pin
// el为当前元素     binding为值和基本信息就是v-pin设置的值
Vue.directive('pin', function (el, binding) {
    // binding.value的值为html页面v-pin设置的值 然后赋值给pinned
    var pinned = binding.value;
    console.log(pinned);


    // 如果pinned的值为true 则让el当前元素设置如下的样式
    if (pinned) {
        el.style.position = 'fixed'
        el.style.top = '10px'
        el.style.left = '10px'
    } else {
        el.style.position = 'static'
    }


})
new Vue({
    el: "#seg1",
    data: {
        card1: {
            pinned: false

        },
        card2: {
            pinned: true

        }
    }
})

吃瓜的阳大王

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
VUE自定义指令

VUE自定义指令Vue.directive 自定义指令HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=...
复制链接

扫一扫