您现在的位置是:网站首页> 编程资料编程资料
Vue实现简单弹窗效果_vue.js_
                    
                
                2023-05-24
                308人已围观
            
简介 Vue实现简单弹窗效果_vue.js_
本文实例为大家分享了Vue实现简单弹窗效果的具体代码,供大家参考,具体内容如下
选中input 弹出选项框

显示弹窗

首先要在components中新建两个组件 要实现子组件向父组件传值

selest.vue 里面的内容
选择管理员
{{ str }}
alt.vue 里面的内容
- ×
 
在App.vue 里面写
在router 下面的index.js 里面添加路由

import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' Vue.use(VueRouter) const routes = [   {     path: '/',     name: 'Home',     component: Home   },   {     path: '/about',     name: 'About',     component: function () {       return import('../views/About.vue')     }   },   // 创建的路由   {     path: '/select',     name: 'Select',     component: () => import('../components/selest.vue')   } ] const router = new VueRouter({   mode: 'history',   base: process.env.BASE_URL,   routes }) export default router以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
您可能感兴趣的文章:
                
                
相关内容
- Vue中.env、.env.development及.env.production文件说明_vue.js_
 - vite + electron-builder 打包配置详解_vue.js_
 - 基于Vue3实现无限滚动组件的示例代码_vue.js_
 - JavaScript专题之underscore防抖实例学习_JavaScript_
 - vue如何实现无缝轮播图_vue.js_
 - Vue Router应用方法详解_vue.js_
 - vue下的elementui轮播图自适应高度问题_vue.js_
 - Angular重构数组字段的解决方法示例_AngularJS_
 - Vue手写横向轮播图的实例_vue.js_
 - JS获取当前时间实例代码(年月日时分秒)_javascript技巧_
 
                                
                                                        
                                
                                                        
                                
                                                        
    