VUE自定义指令
作者：互联网
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
}
}
})
标签：consectetur,VUE,自定义,ipsum,sit,elit,指令,amet,adipisicing 来源： https://blog.csdn.net/qq_44822110/article/details/104782868