zoukankan      html  css  js  c++  java
  • 自定义指令-配置传参以及修饰符

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .card{
                width: 200px;
                background: #ccc;
                padding: 10px;
                margin: 5px;
            }
        </style>
    </head>
    <body>
    <div id="app">
        <div v-pin:true.bottom.right="card1.pinned" class="card">
            <button @click="card1.pinned = !card1.pinned">点我啊~</button>
            this is my first card!
            this is my first card!
            this is my first card!
            this is my first card!
            this is my first card!
        </div>
        <div v-pin.top.right="card2.pinned" class="card">
            <a @click="card2.pinned = !card2.pinned" href="#">please touch me</a>
            this is my second card!
            this is my second card!
            this is my second card!
            this is my second card!
            this is my second card!
        </div>
        <div>
            this is my test code@!
            <br>
            this is my test code@!
            <br>
            this is my test code@!
            <br>
            this is my test code@!
            <br>
            this is my test code@!
            <br>
            this is my test code@!
            <br>
            this is my test code@!
            <br>
            this is my test code@!
            <br>
            this is my test code@!
            <br>
            this is my test code@!
            <br>
            this is my test code@!
            <br>
            this is my test code@!
            <br>
            this is my test code@!
            <br>
            this is my test code@!
            <br>
            this is my test code@!
            <br>
            this is my test code@!
            <br>
            this is my test code@!
            <br>
            this is my test code@!
            <br>
            this is my test code@!
            <br>
            this is my test code@!
            <br>
            this is my test code@!
            <br>
            this is my test code@!
            <br>
            this is my test code@!
            <br>
            this is my test code@!
            <br>
            this is my test code@!
            <br>
            this is my test code@!
            <br>
            this is my test code@!
            <br>
            this is my test code@!
            <br>
            this is my test code@!
            <br>
            this is my test code@!
            <br>
            this is my test code@!
            <br>
            this is my test code@!
            <br>
            this is my test code@!
            <br>
        </div>
    </div>
    
    <script src="../lib/vue.js"></script>
    <script src="js/main.js"></script>
    </body>
    </html>
    Vue.directive("pin", function (el, binding) {
        var pinned = binding.value;
        var position = binding.modifiers;             //获取属性的函数
        var warning = binding.arg;                   //获取属性的函数
        // console.log("position:",position);
        if (pinned) {
            el.style.position = "fixed";
            for (var key in position) {
                if (position[key]) {
                    el.style[key] = "20px"
                }
            }if(warning === "true"){
                el.style.background = "red"
            }
        } else {
            el.style.position = "static"
        }
    });
    
    var app = new Vue({
        el: "#app",
        data: {
            card1: {
                pinned: false
            },
            card2: {
                pinned: false
            }
        }
    });
  • 相关阅读:
    PAT 甲级 1132 Cut Integer (20 分)
    AcWing 7.混合背包问题
    AcWing 9. 分组背包问题
    AcWing 5. 多重背包问题 II
    AcWing 3. 完全背包问题
    AcWing 4. 多重背包问题
    AcWing 2. 01背包问题
    AcWing 875. 快速幂
    AcWing 874. 筛法求欧拉函数
    AcWing 873. 欧拉函数
  • 原文地址:https://www.cnblogs.com/52-qq/p/8386913.html
Copyright © 2011-2022 走看看