vue相关,为什么只有最后一个值改变了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head><body>

<div id="app">
    <c1 ref='ref1'></c1><hr>
    <c2></c2>
    <c2></c2>
</div>

<!-- js -->
<script>
    var cc=new Vue();
    var vm=new Vue({
        el:'#app',
        components:{
            c1:{
                template:"<input v-model='c1Val' @keyup='c1func'/>",
                methods:{
                    c1func:function(){
                        cc.$emit('ccfunc',this.c1Val);
                    }
                },
                data:function(){return {c1Val:0}}
            },
            c2:{
                template:"<h1>{{c2Val}}</h1>",
                data:function(){return {c2Val:1}},
                mounted:function(){
                    $this=this;
                    cc.$on('ccfunc',function(msg){
                        //$this.c2Val=msg;
                        $this.c2Val=vm.$refs.ref1.c1Val
                    })
                }
            }
        }
    })

如代码所示,修改c1的输入框,第二个c2回跟着改变,第一个c2始终不变。这是为什么

1个回答

c2:{
        template:"<h1>{{c2Val}}</h1>",
        data:function(){return {c2Val:2}},
        mounted:function(){
                cc.$on('ccfunc', this.ccfunc)
        },
        methods: {
                ccfunc(msg){
                        $this=this;
                        $this.c2Val=msg;
                        console.log('haha', msg, vm.$refs.ref1.c1Val, $this.c2Val)
                        $this.c2Val=vm.$refs.ref1.c1Val
                }
        }
}
把 ccfunc 事件绑定的匿名函数剥离出来,放在 c2 组件的 methods 中就可以了,网上说的是:当有多个一样的组件时 因为相同的组件只渲染一次 组件里的mounted只执行一次,问题是解决了,但是具体原理我也不太清楚,我猜测,可能是跟那个 this 关键字有关系
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
vue.js获取object的属性值
![图片说明](https://img-ask.csdn.net/upload/201810/18/1539849025_957028.png) vue获取的对象中有属性值,直接使用this.object.属性获取值为空,如何获取属性值?
vue怎么实现跳转同一个路由的时候刷新当前路由
vue怎么实现跳转同一个路由的时候刷新当前路由,因为我是父级路由做了个筛选栏,需要传不同值到子路由
点击按钮访问后端,后端request.setAttribute("fff", "153");然后跳转到vue页面,在vue页面如何取fff的值
点击按钮访问后端,后端request.setAttribute("fff", "153");然后跳转到vue页面,在vue页面如何取fff的值
vue为什么我配置了跨域访问的端口号还是原来的
本地端口号8080,需要访问3000端口,然后配置了vue.config.js代码如下 ``` devServer: { open: true, //浏览器自动打开页面 host: "localhost", //本地服务器访问的路径 port: 8080, //本地服务器访问的端口 proxy: { //配置跨域/* */ '/api': {/* */ target: 'http://localhost:3000/', ws: true, changeOrigin: true, pahtRewrite: { '^/api': '', } } } }, ``` 然后调用this.axios.get("/personalized").then(res => {) 最后访问的还是8080端口,求大神指教 ![图片说明](https://img-ask.csdn.net/upload/201912/28/1577517714_334147.png)
vue slot插槽内控件不显示值
``` <el-row> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane name = "waitTodo"> <span slot="label"> <i class="el-icon-message">待处理</i> <el-badge v-model="waitTodo" :max="99" class="item"></el-badge> </span> </el-tab-pane> <el-tab-pane label="已处理" name="done"></el-tab-pane> <el-tab-pane name="waitToAssign"> <span slot="label"> <i class="el-icon-message">待指派</i> <el-badge v-model="waitToAssign" :max="99" class="item"></el-badge> </span> </el-tab-pane> <el-tab-pane label="审核未通过的" name="reject"></el-tab-pane> </el-tabs> </el-row> ``` 上图是代码,我在Tab的slot中定义了一个badge,显示待处理和待指派的数量,后台已经拿到了,也返回了值,之前项目用的是Vue+elementUI,现在换成了vue-elementui-admin,之前是可以正常显示的,现在必须进入页面后手动切换一下Tab才会显示数量,求教大佬们这是为什么,下面是具体情况:![图片说明](https://img-ask.csdn.net/upload/201906/26/1561542885_188585.png)![图片说明](https://img-ask.csdn.net/upload/201906/26/1561542892_833638.png)
新建的vue项目中main.js产生了一个逗号报错的原因是什么?
![图片说明](https://img-ask.csdn.net/upload/201910/17/1571275006_718967.png) 这是直接create的vue项目,居然产生了一个逗号报错 手动去除这个逗号后即可成功运行。 请问为什么这里会自动添加了一个报错的逗号?
其他非vue页面传给vue页面隐式post参数,似乎行不通,怎么解决呢
其他非vue页面传给vue页面隐式post参数,似乎行不通,怎么解决呢
vue引入ts main.ts报错
vue引入ts main.ts报错: unused expression, expected an assignment or function call ``` import Vue from 'vue' import App from '@/App.vue' import router from '@/router/index.ts' new Vue({ el: '#app', router, components: { App }, template: '<App/>' }) ``` npm run dev 运行后 ``` WARNING Compiled with 1 warnings 11:16:22 AM warning in ./src/main.ts [8, 1]: unused expression, expected an assignment or function call ```
使用Vue.extend动态创建的组件,怎么使用v-model接出值?
使用Vue.extend动态创建的组件,怎么在组件上设置v-model接出值,并监听
vue-cli 路由变化了为什么 页面没有变化
# 这个router的index.js页面 ![图片说明](https://img-ask.csdn.net/upload/201910/20/1571559620_430546.png) # 主页面 ![图片说明](https://img-ask.csdn.net/upload/201910/20/1571559668_314034.png) # 点击我的按钮后路由变化了,页面内容没有变 ![图片说明](https://img-ask.csdn.net/upload/201910/20/1571559713_524859.png) # 点击设置按钮后路由变化了,页面内容没有变 ![图片说明](https://img-ask.csdn.net/upload/201910/20/1571559751_515850.png) # 我的vue组件 ![图片说明](https://img-ask.csdn.net/upload/201910/20/1571559810_859936.png) # 设置vue组件 ![图片说明](https://img-ask.csdn.net/upload/201910/20/1571559824_130894.png)
vue.js中如何在data中声明一个空二维数组?
请问在vue.js中如何在data中声明一个空二维数组?请问在vue.js中如何在data中声明一个空二维数组?请问在vue.js中如何在data中声明一个空二维数组?
vue中使用interceptors拦截器
vue中使用interceptors拦截器设置了请求头token,但是token的位置总是在路径的前面,这个怎么处理。
在vue中ruquest拦截器
在vue中ruquest拦截器请求头token被参数替换了怎么办。怎么样才能把请求头的token换回来。
vue 改变一个地方, 其他地方自动渲染改变,该如何实现呢?
我想做一个自动切换语言的页面, 目前遇到的问题便是数据改变了, 但是view无法渲染。 思路: 在vuex中创建了 store,state,getter跟mutations 代码 ``` // state export default { currentlanguage: 'cn', // 当前语言 } ``` ``` // getters export default { getlan: (state) => { return state.lan }, getcurrentlanguage: (state) => { return state.currentlanguage } } ``` ``` import * as types from './mutation-type' export default { [types.SET_LAN] (state, currentlanguage) { console.log(currentlanguage) state.currentlanguage = currentlanguage.lan } } ``` app.vue 中调用 ![图片说明](https://img-ask.csdn.net/upload/201809/12/1536742288_15696.jpeg) index.vue 中调用 ![图片说明](https://img-ask.csdn.net/upload/201809/12/1536742369_290519.jpeg) 得到的结果 ![图片说明](https://img-ask.csdn.net/upload/201809/12/1536742404_317258.jpg) 出来中文的版本完全没问题 ![图片说明](https://img-ask.csdn.net/upload/201809/12/1536742438_65810.jpeg) 切换为英文的时候, 就上面导航变了, 还有state的数据也改变了, 但没有渲染出来, 要如何才能达到预想的效果呢?
vue项目build后请求404
我前端使用vue,后端使用java开发的前后端分离的小项目。 前端完事以后用npm run dev都能正常运行。 但是使用npm run build打包后放在tomcat上访问却出问题了。 界面可以打开,资源也加载了。但是在向后端发送请求时,却报错了。我用的axios请求。 情况如下: <br> Failed to load resource: the server responded with a status of 404 () Error: Request failed with status code 404 at FtD3.e.exports (vendor.b3fd7698053a850e233d.js:43) at e.exports (vendor.b3fd7698053a850e233d.js:13) at XMLHttpRequest.f.onreadystatechange (vendor.b3fd7698053a850e233d.js:19) 我搜索了一下没有什么收获。问题的关键在于后端没问题,dev时请求没问题,就是build时请求404。 求好心人指点。 <br> <hr> <br> ![图片说明](https://img-ask.csdn.net/upload/202001/13/1578882449_857485.png) 今天我再调试,发现错误有了一点变化,主要是多了一个post请求地址,但是实际上这个地址是错误的。正确的应该是139.196.125.89:8080/lis_war/login。
在html文件中引用vue.js和直接创建.vue文件有什么差别??
在html文件中引用vue.js和直接创建.vue文件有什么差别??
vue项目代码分离,指定目录代码不打包
vue项目,想达到后端maven的pom效果,要编译哪个模块就编译哪个,而不是全部编译,该如何实现,请大神支招
vue源码编译 waiting for changes
vue源码, npm install, npm run dev, 就这样一直卡着不动了 ``` PS E:\vue\vue-code\vue> npm run dev > vue@2.6.10 dev E:\vue\vue-code\vue > rollup -w -c scripts/config.js --environment TARGET:web-full-dev rollup v1.25.2 bundles E:\vue\vue-code\vue\src\platforms\web\entry-runtime-with-compiler.js → dist\vue.js... created dist\vue.js in 2.1s [2019-10-24 16:07:03] waiting for changes... ```
VUE如何根据变量动态获取对象属性值
VUE中如何根据一个字符穿或者一个变量,动态获取对象的属性值。如scope.row.col04和scope.row.col05应该是根据变量col02和col03的值来判断获取scope.row的哪个属性的 ``` 插件: <ElSelect :data="{ids: scope.row.col05, names: scope.row.col04}" :max="50" @okClick="(data)=>{scope.row.col05 = data.ids; scope.row.col04 = data.names;}" ></ElSelect> 数据源: data() { return { col02:'col04', col03:'col05' } } ```
爬虫福利二 之 妹子图网MM批量下载
爬虫福利一:27报网MM批量下载 点击 看了本文,相信大家对爬虫一定会产生强烈的兴趣,激励自己去学习爬虫,在这里提前祝:大家学有所成! 目标网站:妹子图网 环境:Python3.x 相关第三方模块:requests、beautifulsoup4 Re:各位在测试时只需要将代码里的变量path 指定为你当前系统要保存的路径,使用 python xxx.py 或IDE运行即可。 ...
Java学习的正确打开方式
在博主认为,对于入门级学习java的最佳学习方法莫过于视频+博客+书籍+总结,前三者博主将淋漓尽致地挥毫于这篇博客文章中,至于总结在于个人,实际上越到后面你会发现学习的最好方式就是阅读参考官方文档其次就是国内的书籍,博客次之,这又是一个层次了,这里暂时不提后面再谈。博主将为各位入门java保驾护航,各位只管冲鸭!!!上天是公平的,只要不辜负时间,时间自然不会辜负你。 何谓学习?博主所理解的学习,它是一个过程,是一个不断累积、不断沉淀、不断总结、善于传达自己的个人见解以及乐于分享的过程。
大学四年自学走来,这些私藏的实用工具/学习网站我贡献出来了
大学四年,看课本是不可能一直看课本的了,对于学习,特别是自学,善于搜索网上的一些资源来辅助,还是非常有必要的,下面我就把这几年私藏的各种资源,网站贡献出来给你们。主要有:电子书搜索、实用工具、在线视频学习网站、非视频学习网站、软件下载、面试/求职必备网站。 注意:文中提到的所有资源,文末我都给你整理好了,你们只管拿去,如果觉得不错,转发、分享就是最大的支持了。 一、电子书搜索 对于大部分程序员...
linux系列之常用运维命令整理笔录
本博客记录工作中需要的linux运维命令,大学时候开始接触linux,会一些基本操作,可是都没有整理起来,加上是做开发,不做运维,有些命令忘记了,所以现在整理成博客,当然vi,文件操作等就不介绍了,慢慢积累一些其它拓展的命令,博客不定时更新 free -m 其中:m表示兆,也可以用g,注意都要小写 Men:表示物理内存统计 total:表示物理内存总数(total=used+free) use...
比特币原理详解
一、什么是比特币 比特币是一种电子货币,是一种基于密码学的货币,在2008年11月1日由中本聪发表比特币白皮书,文中提出了一种去中心化的电子记账系统,我们平时的电子现金是银行来记账,因为银行的背后是国家信用。去中心化电子记账系统是参与者共同记账。比特币可以防止主权危机、信用风险。其好处不多做赘述,这一层面介绍的文章很多,本文主要从更深层的技术原理角度进行介绍。 二、问题引入 假设现有4个人...
程序员接私活怎样防止做完了不给钱?
首先跟大家说明一点,我们做 IT 类的外包开发,是非标品开发,所以很有可能在开发过程中会有这样那样的需求修改,而这种需求修改很容易造成扯皮,进而影响到费用支付,甚至出现做完了项目收不到钱的情况。 那么,怎么保证自己的薪酬安全呢? 我们在开工前,一定要做好一些证据方面的准备(也就是“讨薪”的理论依据),这其中最重要的就是需求文档和验收标准。一定要让需求方提供这两个文档资料作为开发的基础。之后开发...
网页实现一个简单的音乐播放器(大佬别看。(⊙﹏⊙))
今天闲着无事,就想写点东西。然后听了下歌,就打算写个播放器。 于是乎用h5 audio的加上js简单的播放器完工了。 演示地点演示 html代码如下` music 这个年纪 七月的风 音乐 ` 然后就是css`*{ margin: 0; padding: 0; text-decoration: none; list-...
Python十大装B语法
Python 是一种代表简单思想的语言,其语法相对简单,很容易上手。不过,如果就此小视 Python 语法的精妙和深邃,那就大错特错了。本文精心筛选了最能展现 Python 语法之精妙的十个知识点,并附上详细的实例代码。如能在实战中融会贯通、灵活使用,必将使代码更为精炼、高效,同时也会极大提升代码B格,使之看上去更老练,读起来更优雅。
数据库优化 - SQL优化
以实际SQL入手,带你一步一步走上SQL优化之路!
2019年11月中国大陆编程语言排行榜
2019年11月2日,我统计了某招聘网站,获得有效程序员招聘数据9万条。针对招聘信息,提取编程语言关键字,并统计如下: 编程语言比例 rank pl_ percentage 1 java 33.62% 2 cpp 16.42% 3 c_sharp 12.82% 4 javascript 12.31% 5 python 7.93% 6 go 7.25% 7 p...
通俗易懂地给女朋友讲:线程池的内部原理
餐盘在灯光的照耀下格外晶莹洁白,女朋友拿起红酒杯轻轻地抿了一小口,对我说:“经常听你说线程池,到底线程池到底是个什么原理?”
经典算法(5)杨辉三角
杨辉三角 是经典算法,这篇博客对它的算法思想进行了讲解,并有完整的代码实现。
腾讯算法面试题:64匹马8个跑道需要多少轮才能选出最快的四匹?
昨天,有网友私信我,说去阿里面试,彻底的被打击到了。问了为什么网上大量使用ThreadLocal的源码都会加上private static?他被难住了,因为他从来都没有考虑过这个问题。无独有偶,今天笔者又发现有网友吐槽了一道腾讯的面试题,我们一起来看看。 腾讯算法面试题:64匹马8个跑道需要多少轮才能选出最快的四匹? 在互联网职场论坛,一名程序员发帖求助到。二面腾讯,其中一个算法题:64匹...
面试官:你连RESTful都不知道我怎么敢要你?
干货,2019 RESTful最贱实践
JDK12 Collectors.teeing 你真的需要了解一下
前言 在 Java 12 里面有个非常好用但在官方 JEP 没有公布的功能,因为它只是 Collector 中的一个小改动,它的作用是 merge 两个 collector 的结果,这句话显得很抽象,老规矩,我们先来看个图(这真是一个不和谐的图????): 管道改造经常会用这个小东西,通常我们叫它「三通」,它的主要作用就是将 downstream1 和 downstre...
为啥国人偏爱Mybatis,而老外喜欢Hibernate/JPA呢?
关于SQL和ORM的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行了一番讨论,感触还是有一些,于是就有了今天这篇文。 声明:本文不会下关于Mybatis和JPA两个持久层框架哪个更好这样的结论。只是摆事实,讲道理,所以,请各位看官勿喷。 一、事件起因 关于Mybatis和JPA孰优孰劣的问题,争论已经很多年了。一直也没有结论,毕竟每个人的喜好和习惯是大不相同的。我也看...
SQL-小白最佳入门sql查询一
不要偷偷的查询我的个人资料,即使你再喜欢我,也不要这样,真的不好;
项目中的if else太多了,该怎么重构?
介绍 最近跟着公司的大佬开发了一款IM系统,类似QQ和微信哈,就是聊天软件。我们有一部分业务逻辑是这样的 if (msgType = "文本") { // dosomething } else if(msgType = "图片") { // doshomething } else if(msgType = "视频") { // doshomething } else { // doshom...
【图解经典算法题】如何用一行代码解决约瑟夫环问题
约瑟夫环问题算是很经典的题了,估计大家都听说过,然后我就在一次笔试中遇到了,下面我就用 3 种方法来详细讲解一下这道题,最后一种方法学了之后保证让你可以让你装逼。 问题描述:编号为 1-N 的 N 个士兵围坐在一起形成一个圆圈,从编号为 1 的士兵开始依次报数(1,2,3…这样依次报),数到 m 的 士兵会被杀死出列,之后的士兵再从 1 开始报数。直到最后剩下一士兵,求这个士兵的编号。 1、方...
致 Python 初学者
欢迎来到“Python进阶”专栏!来到这里的每一位同学,应该大致上学习了很多 Python 的基础知识,正在努力成长的过程中。在此期间,一定遇到了很多的困惑,对未来的学习方向感到迷茫。我非常理解你们所面临的处境。我从2007年开始接触 python 这门编程语言,从2009年开始单一使用 python 应对所有的开发工作,直至今天。回顾自己的学习过程,也曾经遇到过无数的困难,也曾经迷茫过、困惑过。开办这个专栏,正是为了帮助像我当年一样困惑的 Python 初学者走出困境、快速成长。希望我的经验能真正帮到你
“狗屁不通文章生成器”登顶GitHub热榜,分分钟写出万字形式主义大作
一、垃圾文字生成器介绍 最近在浏览GitHub的时候,发现了这样一个骨骼清奇的雷人项目,而且热度还特别高。 项目中文名:狗屁不通文章生成器 项目英文名:BullshitGenerator 根据作者的介绍,他是偶尔需要一些中文文字用于GUI开发时测试文本渲染,因此开发了这个废话生成器。但由于生成的废话实在是太过富于哲理,所以最近已经被小伙伴们给玩坏了。 他的文风可能是这样的: 你发现,...
程序员:我终于知道post和get的区别
是一个老生常谈的话题,然而随着不断的学习,对于以前的认识有很多误区,所以还是需要不断地总结的,学而时习之,不亦说乎
GitHub标星近1万:只需5秒音源,这个网络就能实时“克隆”你的声音
作者 | Google团队 译者 | 凯隐 编辑 | Jane 出品 | AI科技大本营(ID:rgznai100) 本文中,Google 团队提出了一种文本语音合成(text to speech)神经系统,能通过少量样本学习到多个不同说话者(speaker)的语音特征,并合成他们的讲话音频。此外,对于训练时网络没有接触过的说话者,也能在不重新训练的情况下,仅通过未知...
《程序人生》系列-这个程序员只用了20行代码就拿了冠军
你知道的越多,你不知道的越多 点赞再看,养成习惯GitHub上已经开源https://github.com/JavaFamily,有一线大厂面试点脑图,欢迎Star和完善 前言 这一期不算《吊打面试官》系列的,所有没前言我直接开始。 絮叨 本来应该是没有这期的,看过我上期的小伙伴应该是知道的嘛,双十一比较忙嘛,要值班又要去帮忙拍摄年会的视频素材,还得搞个程序员一天的Vlog,还要写BU...
加快推动区块链技术和产业创新发展,2019可信区块链峰会在京召开
11月8日,由中国信息通信研究院、中国通信标准化协会、中国互联网协会、可信区块链推进计划联合主办,科技行者协办的2019可信区块链峰会将在北京悠唐皇冠假日酒店开幕。   区块链技术被认为是继蒸汽机、电力、互联网之后,下一代颠覆性的核心技术。如果说蒸汽机释放了人类的生产力,电力解决了人类基本的生活需求,互联网彻底改变了信息传递的方式,区块链作为构造信任的技术有重要的价值。   1...
程序员把地府后台管理系统做出来了,还有3.0版本!12月7号最新消息:已在开发中有github地址
第一幕:缘起 听说阎王爷要做个生死簿后台管理系统,我们派去了一个程序员…… 996程序员做的梦: 第一场:团队招募 为了应对地府管理危机,阎王打算找“人”开发一套地府后台管理系统,于是就在地府总经办群中发了项目需求。 话说还是中国电信的信号好,地府都是满格,哈哈!!! 经常会有外行朋友问:看某网站做的不错,功能也简单,你帮忙做一下? 而这次,面对这样的需求,这个程序员...
网易云6亿用户音乐推荐算法
网易云音乐是音乐爱好者的集聚地,云音乐推荐系统致力于通过 AI 算法的落地,实现用户千人千面的个性化推荐,为用户带来不一样的听歌体验。 本次分享重点介绍 AI 算法在音乐推荐中的应用实践,以及在算法落地过程中遇到的挑战和解决方案。 将从如下两个部分展开: AI算法在音乐推荐中的应用 音乐场景下的 AI 思考 从 2013 年 4 月正式上线至今,网易云音乐平台持续提供着:乐屏社区、UGC...
【技巧总结】位运算装逼指南
位算法的效率有多快我就不说,不信你可以去用 10 亿个数据模拟一下,今天给大家讲一讲位运算的一些经典例子。不过,最重要的不是看懂了这些例子就好,而是要在以后多去运用位运算这些技巧,当然,采用位运算,也是可以装逼的,不信,你往下看。我会从最简单的讲起,一道比一道难度递增,不过居然是讲技巧,那么也不会太难,相信你分分钟看懂。 判断奇偶数 判断一个数是基于还是偶数,相信很多人都做过,一般的做法的代码如下...
【管理系统课程设计】美少女手把手教你后台管理
【文章后台管理系统】URL设计与建模分析+项目源码+运行界面 栏目管理、文章列表、用户管理、角色管理、权限管理模块(文章最后附有源码) 1. 这是一个什么系统? 1.1 学习后台管理系统的原因 随着时代的变迁,现如今各大云服务平台横空出世,市面上有许多如学生信息系统、图书阅读系统、停车场管理系统等的管理系统,而本人家里就有人在用烟草销售系统,直接在网上完成挑选、购买与提交收货点,方便又快捷。 试想,若没有烟草销售系统,本人家人想要购买烟草,还要独自前往药...
4G EPS 第四代移动通信系统
目录 文章目录目录4G 与 LTE/EPCLTE/EPC 的架构E-UTRANE-UTRAN 协议栈eNodeBEPCMMES-GWP-GWHSSLTE/EPC 协议栈概览 4G 与 LTE/EPC 4G,即第四代移动通信系统,提供了 3G 不能满足的无线网络宽带化,主要提供数据(上网)业务。而 LTE(Long Term Evolution,长期演进技术)是电信领域用于手机及数据终端的高速无线通...
相关热词 c#选择结构应用基本算法 c# 收到udp包后回包 c#oracle 头文件 c# 序列化对象 自定义 c# tcp 心跳 c# ice连接服务端 c# md5 解密 c# 文字导航控件 c#注册dll文件 c#安装.net
立即提问