<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js"></script> </head> <body> <style> .head{ width: 400px; height: 100px; background-color: green; } .meta{ margin: 0 auto; width: 100px; height: 100px; background-color: palevioletred; } span{ line-height: 100px; font-size: 14px; } .box2{ width: 100px; height: 200px; background-color: pink; left:150px; position: absolute; } </style> <div id="box" :style="{position:'relative'}"> <div class="head"> <div class="meta" @click="pull"> <span>{{tip}}</span> </div> </div> <div class="box2" :style="{display:d}">{{tip2}}</div> </div> <script> new Vue({ el:"#box", data:{ tip:"点击收缩下拉框", flag:true, tip2:"这是下拉框内容", d:"none", }, methods: { pull(){ this.flag = !this.flag if(!this.flag){ this.d = "none" }else{ this.d = "block" } } }, }) </script> </body> </html>
标签:Vue,color,100px,点击,height,width,flag,下拉框 From: https://www.cnblogs.com/LIXI-/p/16644809.html