vue点击选择，并将数据传到另一个页面

最新推荐文章于 2022-10-30 22:03:42 发布
最新推荐文章于 2022-10-30 22:03:42 发布
阅读量7k 收藏 4
点赞数 1
文章标签： vue 组件传参 登录注册
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WGTkris/article/details/96771874
版权

最近做的一个vue项目，注册有一个选择手机归属地的功能，选择归属地然后把属性值传到另一个组件

1、不能将值写死，所以我们需要定义属性值，然后在页面布局写好插值表达式

   

 

2、因为需要点击选择，所以给每一个数据绑定点击事件（因为数据都是相同样式，所以可以用v-for创建）

     事件名自取(放进你需要读取的数据名)，因为我需要改变归属地名称以及号码前缀，所以我需要读取两个数据

 

3、在methods里定义点击事件

      事件名(形参名可自取)，对应的是第二步中读取的数据，然后赋给this.对象，就会改变第一步中布局里的值

WGT_Kris
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
[Vue]使用iframe实现弹窗加载页面
喜欢前端的后端 MelodyJerry
03-28 5509
描述 在页面中点击链接，弹出窗口，窗口中加载指定的页面内容 代码 <template lang=""> <el-link type="success" @click="test">主要链接</el-link> <el-dialog title="提示" :visible.sync="dialogVisible" width="80%" height="100%" :before-clos
vue纯前端组件之间传值（弹窗与页面之间）
susu_1111的博客
12-20 1093
最近做了vue的项目模板，里面的父子组件之间传值，有了一些感悟，自己总结总结 子传父 在子组件传父组件传值处用this.emitthis.emit this.emitthis.emit(‘function’,param) param是参数 这样单看一个点 ，有点难懂的话 可以看代码 子组件： 父组件： 在父组件引进子组件的标签内添加与子组件连通的函数，在对saveMes进行处理时，将子组件的数据作为实参接收即可 ** 父传子** 子组件使用props接收 接收时还可以设置默认值 当没获取到值时
Vue中如何将数据传递到下一个页面（超级简单哒）
weixin_30389003的博客
04-20 1万+
先展示效果：注意URL中值是有变化的 一：在goodslist.vue文件夹绑定 <router-link :to="'/goodsinfo/'+subitem.artID" class=""> <div class="img-box"> <img v-lazy="subitem.img_url"> ...
vue 引入其他页面后 获取父页面参数_vue从一个页面跳转到另一个页面并携带参数的解决方法...
weixin_34170028的博客
12-23 2243
vue从一个页面跳转到另一个页面并携带参数的解决方法1.需求：点击商场跳转到商业体列表解决方案：元页面：a标签中添加跳转函数商场toMallInfo: function(mallCode){this.$router.push({path: '/propertyInfo/mall/mallList',// name: 'mallList',query: {mallCode: 'M000989'}})...
vue父页面跳转子页面，值传递
kewen_123的博客
05-15 1094
<!-- 导入弹框 --> <debugger-dialog ref="ProcDebuggerDialog" :visible.sync="debuggerVisible" @success="getList" /> components: { 'debugger-dialog': () => import('./procDebuggerDialog') }, data() { r...
vue实现的上传图片到数据库并显示到页面功能示例
12-29
本文实例讲述了vue实现的上传图片到数据库并显示到页面功能。分享给大家供大家参考，具体如下： 1、点击上传图片，弹出选择图片选项框。 页面代码： 上传图片 <input type=file name=avatar id=avatar multiple=...
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
10-16
主要介绍了vue.js实现数据库的JSON数据输出渲染到html页面功能,结合实例形式分析了vue.js针对本地json数据的读取、遍历输出相关操作技巧,需要的朋友可以参考下
vue异步axios获取的数据渲染到页面的方法
10-18
今天小编就为大家分享一篇vue异步axios获取的数据渲染到页面的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
10-15
在这个例子中，Vue组件在创建时发送一个GET请求到`/api/goods`，接收到服务器返回的数据后，将其渲染到页面上。前端通过监听`created`生命周期钩子来获取数据，然后将数据绑定到Vue实例的`data`属性，最后在模板中...
在vue中实现简单页面逆传值的方法
08-28
在 Vue 中实现简单页面逆传值的方法是一个常见的需求，当我们从一个页面跳转到另一个页面时，原来的页面的 Vue 实例和相关数据已经销毁了，要实现逆传值就要找到操作的对象及它的一些属性。下面是实现简单页面逆传值...
【vue】页面弹窗传值记录
王昱潇的博客
11-25 556
需求：点击新增按钮，弹出Form弹窗 代码：
vue 第一个页面加载时将表第一行参数传给第二个页面进行初始化
smilelove520的博客
02-24 980
项目中有很多多表多页面级联显示的业务,每次都需要点击行来触发另一个页面的加载,这样页面看起来效果不是很好。现需要在第一个页面加载完毕根据表中第一行的内容自动触发别的页面初始化,使用watch来监听第一个页面表格数据变化进行调用第二个页面方法,记录一下供以后使用。 watch 监听 父页面 <div class="title-font">药品申请列表</div> <el-table ref="applyTable" v-loading="loading" :data="app
vue中复选框选中改行数据，后台如何自动带入到前台页面
TianmingQi94的博客
03-25 571
<el-table :data="clmRecycleDetail" fit border @selection-change="handleSelectionChange" @row-click="clickRow" ref="moviesTable" tooltip-effect="dark" style="width:100%" &...
Vue2_弹框中选中的表格行数据赋值给主页面表格
Rainbow_bead的博客
10-30 567
vue 弹框中选中的表格行数据赋值给主页面表格
VUE 弹窗组件实现动态挂载
denglouhen的博客
12-10 2268
有时候在开发中遇到这种需求，需要在某些页面中动态加载一个弹窗，比如未登录的时候，在点击某些地方，需要弹出登录框要求登录。 如果在每个页面都import进去未免太过繁琐，在根页面引入后监听也不咋好的感觉。 因此，可以使用VUE.extend动态挂在组件。以登录框组件为例： 首先，自然是要一个登录组件页面，login.vue，这个按照自己的需求写就行了。 然后，新建login.js，代码如下： import Vue from "vue"; import login from "./login.vue
vue中从一个页面传参到另一个页面
热门推荐
记录一些工作日常和学习
03-12 3万+
首先我在home.vue中定义updates(id){ this.$router.push({ path:'/world', name:'world', params:{ id : id } ...
【Vue】Vue.js：从列表到详情页面，如何传值，如何控制是否可编辑，按钮是否显示
陶洲川的博客
05-30 2401
一、问题 1.1、环境 电脑环境：Windows 10； 开发工具：IntelliJ IDEA； 数据库环境：Redis 3.2.100 JDK环境: Jdk1.8； 1.2、问题 【Vue】我们写前段页面，一个经常遇到的场景就是页面传值，除了我们之前说过的父子页面之间的引用，还有一种场景就是松耦合的两个页面之间的跳转和传参，今天总结下一下3个问题： 1.源头页面如何传值，目的地页面如何接收； 2.如何控制是否可编辑； 3.如何控制按钮是否显示； 二、解答 1.列表传值我们有两种模式： ①.是在路由中定义一
数组里数据放到map里传给Vue文本框
Isabelle_ximi的博客
05-29 1185
后台读取了四条数据数据是List形式，传到前台是四个array，没想到直接关联到v-model="dataForm.xxx"的方法。 在service层中，读取完数据库数据之后把list遍历到map对象里，这样就能直接从一个map里找到Value对应的键名。 public HashMap<String, String> getPrice(Integer Type) { HashMap<String, Object> param = new HashMap<S
vue的在html中页面传值,Vue页面间传值，以及客户端数据存储
weixin_39915668的博客
06-03 1736
初学Vue，遇到了页面传值的问题，大概网上学习了解了一下，在此跟大家分享一下学习心得，欢迎批评指正。一.参数传值如果是简单的页面传值，比如传一个id到详情页等等，推荐使用参数传值。这里页面是通过路由跳转的，所以参数传值有两种方法，也就是借助$router的两个参数【params】和【query】。页面跳转的话，可以通过页面路由的名称name或路径path去定义目标页面。定义一个v-on:click...
vue点击按钮后传数据到另一个页面
最新发布
05-18
你可以使用Vue Router来实现这个功能。首先在Vue项目中安装Vue Router： ``` npm install vue-router --save ``` 然后在main.js中引入和使用Vue Router： ```javascript import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const router = new VueRouter({ routes: [ { path: '/destination', name: 'destination', component: DestinationComponent } ] }) new Vue({ router, render: h => h(App) }).$mount('#app') ``` 上面的代码中定义了一个名为`destination`的路由，它对应的组件是`DestinationComponent`。 在需要传数据的页面中，你可以使用`router.push`方法来跳转到目标页面，并将数据通过路由参数进行传递： ```javascript this.$router.push({ name: 'destination', params: { data: yourData }}) ``` 在目标页面的组件中，你可以通过`$route.params`来获取路由参数： ```javascript mounted() { const data = this.$route.params.data } ``` 这样就完成了从点击按钮传递数据到另一个页面的功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值