vue 自定义指令

最新推荐文章于 2023-03-09 00:22:01 发布

XTFELY

最新推荐文章于 2023-03-09 00:22:01 发布

阅读量85

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/weixin_44752891/article/details/90111035

版权

Web前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

html部分

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>过滤</title>
       <link rel="stylesheet" href="../css/demo4-1.css">
   </head>
   <body>
       <div id="app">
           <div class="box">
               <div class="top">
                   <img src="../img/top.png">我的好友
               </div>
               <div class="user">
                   <img src="../img/img1.jpg">
                   <div>
                       <p><a v-dream="vipcolor">{{vipname}}</a></p>
                       <span class="time">上次登录：2019.4.22</span>
                   </div>
               </div>
               <div class="user">
                   <img src="../img/img2.jpg">
                   <div>
                       <p><a>{{name}}</a></p>
                       <span class="time">上次登录：2019.4.23</span>
                   </div>
               </div>
           </div>
       </div>
       <script src="../js/vue.js"></script>
       <script src="../js/demo4-1.js"></script>
   </body>
</html>

CSS部分

.mod {
margin-top: 40px;
}
.mod h4 {
font-size: 18px;
margin-bottom: 15px;
margin-top: 40px;
}
.mod p {
height: auto;
line-height: 24px;
}
.box{
   height: 175px;
   width: 275px;
   background: #efefef60;
   border: 1px solid #1A73E8;
}
.top{
   font-size:14px;
   color: #525252;
   padding-bottom: 5px;
   border-bottom: 1px solid #1A73E830;
}
.top img{
   width: 15px;
   height:15px;
   margin: 8px 5px -2px 16px;
}
.user{
   display: flex;
   width: 275px;
   height: 60px;
   color: #525252;
   font-size: 14px;
   margin-bottom: 5px;
}
.user img{
   width: 50px;
   height: 50px;
   margin: 15px;
   border-radius: 50%;
}
.user p{
   margin-top: 19px;
}
.time{
   position: relative;
font-size: 12px;
top: -10px;
   color: #808080;
}

js部分

Vue.directive('dream',function (el,bind) {
       console.log( el );
       el.style = 'color:' + bind.value
       console.log(bind)
})
let app = new Vue({
       el:'#app',
       data:{
               name:'普通用户默认昵称',
               vipname:'vip专属红色昵称',
               vipcolor:'red',
               info:'blue',
               num:0
       }
})

注意：要注意图片设置和CSS及js文件的连接

XTFELY

关注

0
点赞
踩
0

收藏

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

html部分<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>过滤</title> <link rel="stylesheet" href="../css/demo4-1.css">...
复制链接

扫一扫

专栏目录