首页 > 其他分享 >用Vue框架实现 - 点击出现下拉框

用Vue框架实现 - 点击出现下拉框

时间:2022-08-31 22:44:43浏览次数:54  
标签:Vue color 100px 点击 height width flag 下拉框

 

<!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

相关文章

  • npm安装vue,在vue/dist目录下没有产生vue.js文件 只在vue后面加上@2指定版本即可。 np
    npm安装vue,在vue/dist目录下没有产生vue.js文件遇到问题:在进行npminstall时,vue/dist目录下没有生成vue.js的情况。解决办法:只在vue后面加上@2指定版本即可。npmin......
  • vue3学习
    资料:http://docs.vikingship.xyz/ 声明类型:   1.使用ref可以声明基础数据   2.使用reactive声明对象数据     3.computed可以返回一个不变的响应......
  • arco-design-vue 按需引入+自动 import+模板组件提示
    非常感谢番薯有才在飞书中的回复,以下核心步骤均由他提供:使用vite创建一个vue-ts类型的项目,并安装所需的最小依赖:yarncreatevitearco-design-vue-auto-import-......
  • Vue路由动态改变浏览器标题名称和图标样式
    路由constrouter=newRouter({mode:'hash',base:process.env.BASE_URL,router:[{path:'/',redirect:'home'......
  • @vue/cli 安装及'vue' 不是内部或外部命令解决办法
    1、首先安装@vue/clinpminstall-g@vue/cli提示安装成功,版本啥的,忘了截图2、然后vue-V或者vue--version查看版本但是提示'vue'不是内部或外部命令解决办法我......
  • vue3进阶学习
    vue3进阶学习官方网站:https://v3.vuejs.org/中文文档:https://staging-cn.vuejs.org/guide/introduction.html目的:加强对vue3的学习了解vue3在生产环境下需要安装......
  • vue——vuex四个map方法的使用
    1.mapState方法:用于帮助我们映射state中的数据为计算属性注意1:mapState的作用:用来生成重复代码,比如returnthis$store.state.xxx就非常重复,无法复用。mapState采用{k:v}......
  • 20220829 第一组 于芮 Vue坏人Tomcat入门
     小白成长记——第三十七天    这几天的主要学习内容就是Vue以及简单的Tomcat在ideal中的配置,总体来说说学习内容很多,每天都很充实,时间都用来学习,整个人都很开心......
  • vue直接赋值后数据不更新
    在写vue的时候,存在某些情况,明明赋值给model了,页面数据不变化。原因我就不仔细分析了,下面直接上解决办法:1.1、Vue不能检测以下变动的数组当你利用索引直接设置一个项时,......
  • VUE学习2
    目录分析public目录index.html是起始的html文件#这是关键<divid="app"></div>src目录main.js是Vue项目的入口文件属性props:接受父组件传过来的值props:{m......