在ASP.NET MVC项目中遇到了这样的一个问题,假设父页面有一个iframe <iframe id=" width="100%" height="100%"></iframe> 通过父页面上的一个按钮触发该iframe的src属性指向一个url: var url = "/somecontrollername/someactionname"; $("#sth").attr("src

  v-for不能进行双向数据绑定,页面渲染完成后,再次更改v-for遍历的数据,js里面打印的数据看到数据值已经更改,但是页面的数据就是没有渲染,这是为什么呢? vue中v-for和angularjs中的ng-repeat不用 ,它对页面只进行一次渲染.后续如果需要更改数据且显示在页面上就需要想想其他办法啦~~~ 经过多次踩坑发现如下解决办法: 1.将vue引入当前页面,如下图所示: 2.使用Vue.set方法来对数据进行更改及渲染,如下图所示:

最近的项目开发中用到了Vue组件中嵌套iframe,相应的碰到了组件和HTML的通信问题,场景如下:demo.vue中嵌入 test.html 由于一般的iframe嵌套是用于HTML文件的,在vue中我们需要在vue文件注册一个全局的方法,在iframe中某个事件触发时,可以回传到vue组件 demo.vue主要代码: <template> <iframe ref="iframe" src='test.html'> </iframe> </t

最近项目需求需要在vue中展示pdf,上网搜索了实现方法,找到vue-pdf这个插件非常好用,并且还有许多方法.属性能进行功能扩展. 一.安装 npm install --save vue-pdf 二.基本示例 <template> <div class="pdf"> <pdf ref="pdf" :src="pdfUrl"> </pdf> </div> </template>

项目需要在线展示和编辑Json文件,所以需要找一个代码编辑器,因为我们的项目直接使用的 vueAdmin-template 这个模板 json编辑器也是直接从 vue-element-admin 项目扒下来的…… //好吧 这个项目看起来很炫,其实有很多坑,我们组没人用过vue,又需要快速完成任务,就随便找了一个= = JsonEditor.vue(和原项目比我改了一下 <template> <div class="json-editor"> <texta

js框架:vue ui框架:element 因为iframe加载慢,所以在它加载完成前添加loading效果,loading用的是element家的加载效果 <template> <div style="height:100%;overflow: auto;" v-loading="loading"> <iframe ref="iframe" :src="src" width="100%

在vue中,有时候我们只想缓存页面中的一些组件或页面,这个时候怎么办呢,我们就需要用判断来加载keep-alive. 例如: // router.js { path: "/driving_licence", component: () => DrivingLicence, meta: { isShowFooter: true, title: "驾照查分" } }, { name: "ticket", path: "/ticket&

最近遇见动态渲染img时,想起了当初刚开始写vue时,曾经遇见的一个小小坑. Vue中:img的src属性是动态渲染时不显示问题1.需求:展示用户头像,数据从后台获取,如果没有拿到则显示默认图片. 如图: 2.第一次写: 如图: 3.结果(汗...)并没有显示默认图片来代替: 审查元素发现没显示默认的图片,图片没有被打包.... 如图: 4.解决方案: 1.使用require引入图片 2.使用img的onerror属性

vue中嵌套iframe,将要嵌套的文件放在static下面: <iframe src="../../../static/bear.html" width="300" height="300" frameborder="0" scrolling="auto"></iframe>   src可以使用相对路径,也可使用服务器根路径http:localhost:8088/…等: <i

1,父 html 调用子 iframe 内方法: document.getElementById("iframe").contentWindow.func(data1,data2...); 2,子 Iframe 中 调用 父html中方法: parent.func(data1,data2...) 在VUE中: // 父vue文件调用 iframe html文件中方法:this.$refs.iframe.contentWindow.func(data1,data2...); // 在 i

vue中嵌套iframe,将要嵌套的文件放在static下面.(要将打包文件整体放在statici里,我的文件名是canvas) src可以使用相对路径,也可使用服务器根路径http:localhost:8088/… <iframe src="../../static/canvas/无标题-1_HTML Canvas.html" width="1200" height="300" frameborder="0" scro

vue中,经常会遇到显示图片的问题, 如果是一个普通组件的话,那么这样就可以了 <img src="../assets/images/avtor.jpg" width="100%"> 但是呢,如果想写成动态的呢,可以试试如下办法: <img :src="logo"> import logo from '@assets/images/avatar.png'; data() { return { logo, } } 此种办法必

在项目中遇到了一个需求,后台返回string类型的html源码,要求前端这边按照codeview这种类型把这个源码展示出来.现总结如下 1.如果没啥样式的需求,只是要求该缩进缩进的话,可以直接使用innerText属性,然后给你这个包裹了html源码的div加上white-space:pre;就可以了.效果如下: 2.如果要求你的源码可以编辑并且按照codeview的那种主题样式展示可以使用codemirror插件 我是在vue中使用的 1.首先安装vue-codemirror npm inst

目录 VUE中登录密码显示与隐藏的最简设计--基于iview 1.背景 2.实现最终效果 2.1 隐藏密码 2.2 显示密码 3.实现思路 3.1 v-if判断当前密码显示状态 3.2 密码隐藏状态 3.3 密码显示状态 3.4 两种眼睛图标(睁眼,闭眼)的监听切换密码显示状态事件 4.小结 VUE中登录密码显示与隐藏的最简设计--基于iview 1.背景 近期,在使用abp开发项目过程中,前端vue输入登录密码时默认隐藏,但是如果用户输错密码需要切换显示跟隐藏.故有此文. 2.实现最终效果 2

最近在用vue,遇到倒计时在ios上显示为NAN的问题. 因为做的是倒计时支付,思路是获取服务器时间和下单时间,再转成秒级时间戳做差值. 在网上找到说是ios 不支持例如2018-09-01 10:00:59这种"-"连接符. 网上的解决是: var date = '2018-09-01 12:00:00' var time= Date.parse(new Date(date)) 然后用正则匹配改一下,将-替换为/ var date = '2018-09-01 12:00:00' va

前言 项目中遇到一个问题就是在Vue中双向绑定对象属性时,手动赋值属性后输入框的数据不实时更新的问题. <FormItem label="地址" prop="eventAddress"> <Input v-model="task.eventAddress" :placeholder="L('地址')"></Input> </FormItem> 解决办法:使用$set(object

1. Vue中不可以添加不存在的属性,因为不存在的属性是没有getter和setter的. <div id="app"> {{msg.a}} {{msg.b}} </div> <script src="js/vue.js"></script> <script> let vm = new Vue({ el: "#app", data: { msg: { a: 1 } } }) vm.msg

vscode中iframe由于某种原因不支持本地页面,比如<iframe src ="index.html" width="300" height="300"></iframe>这样的. 但是支持远程网络地址,比如像<iframe src ="https://www.baidu.com" width="300" height="300"></if

[本文出自天外归云的博客园] 需求 1. Vue中使用ECharts画散点图 2. 在图中加入加均值线 3. 在图中标注出阴影区域 实现 实现这个需求,要明确两点: 1. 知道如何在vue中使用echarts 2. 要知道如何在echarts散点图中画均值线和阴影区域 在下面的代码option对象的series属性中用到了markLine和markArea,标注最值用到了markPoint. 所以去官方文档搜索标线.标点.标图的关键字要搜mark. 如何在vue中使用echarts见文末. 需要

一般项目中,有时候会要求,你在数据请求的时候显示一张gif图片,然后数据加载完后,消失.这个,一般只需要在封装的axios中写入js事件即可.当然,我们首先需要在app.vue中,加入此图片.如下: <template> <div id="app"> <loading v-show="fetchLoading"></loading> <router-view></router-view> <

今天主要记录  vue中命名视图的用法 先奉上官网网址:https://router.vuejs.org/zh/guide/essentials/named-views.html 一般情况下,一个页面里面可能有多个组件,比如侧边栏,内容区,侧边栏是一个组件.内容区是一个组件,我们普遍会将两个组件作为子组件添加到主页面中,因为页面中只有一个 router-view视图,那么问题来了,怎么让一个页面中有多个视图呢,拥有多个视图,很随意,多写几个router-view标签就行了,但是每个router-