Vue
crazy_wsp
每天都是新的开始,珍惜每一天!
展开
-
vue实现动态切换图片src
通过计算属性搭配require实现。功能: 定义一个定时器,每隔3秒随机生成一个文件名;通过计算属性根据文件名重新加载图片路径,从而实现定时随机切换图片的效果。图片路径:/assets/images/,图片名称分别为1.png、2.png …20.png。代码:<template> <div> <el-image :src="getImageUrl"></el-image> </div></template&g原创 2021-12-30 19:57:13 · 4018 阅读 · 2 评论 -
vue 方法间传递数据对象参数
功能:将data对象作为参数传递给方法,在方法中对不同的参数进行相应操作。如下,实现简单实现根据传入的不同p标签key对象,在相应p标签中显示相应内容:<template> <div> <!-- 可以通过如下两种方式绑定标签内容 --> <p>{{map.p1Content}}</p> <p>{{map.p2Content}}</p> <p>{{map.p3Content}原创 2020-12-17 10:29:12 · 4472 阅读 · 0 评论 -
element ui+vue使用filters格式化日期时间
定义日期格式化方法目录:filters/index.js/** * @desc 时间格式化 * 将 2019-07-18T11:54:16.000+0000 格式化成类似 2019/07/18 11:54:16 * 可以指定日期和时间分隔符 * @param datetime 国际化日期格式 */export function formatDatetime (datetime) { if (datetime != null) { const d原创 2020-12-05 11:06:50 · 732 阅读 · 0 评论 -
Duplicate keys detected ‘‘. This may cause an update error问题
问题描述:Duplicate keys detected: ‘6’. This may cause an update error,但模板组件可以正常渲染。产生该问题的原因是出现了重复的key,主要分为如下两种情况:场景一:报错如下:由图可知,因为集合中的id有重复的值,当我们在 v-for 中使用id作为key时,即为报错,修改为使用index索引作为key,如下:<p v-for="(item, index) in list" :key="index">{{item.name}原创 2020-12-04 22:49:24 · 74424 阅读 · 4 评论 -
Vue.prototype详解
原文:https://www.cnblogs.com/mica/p/11162566.html如果需要设置全局变量,在main.js中,Vue实例化的代码里添加。来自vue官网 https://cn.vuejs.org/v2/cookbook/adding-instance-properties.html不想污染全局作用域。这种情况下,你可以通过在原型上定义它们使其在每个 Vue 的实例中可用。Vue.prototype.$appName = ‘My App’这样 $appName 就在所有的转载 2020-07-31 16:07:59 · 433 阅读 · 0 评论 -
Uncaught (in promise) TypeError: Cannot read property ‘$message‘ of undefined
vue实例中this指的是vue本身,通过this就可以调用vue对象的所有api。出现上述问题则说明,当前的this对象发生了改变,无法调用$message方法。箭头函数并不简单是匿名函数的简写:在JS中,箭头函数和匿名函数有一个明显的区别:箭头函数内部的this是词法作用域,在编写函数时就已经确定了。而匿名函数的this指向运行时实际调用该方法的对象,无法在编写函数时确定this对象指的是哪个对象。monitorApi.updateRtsp(this.monitorCode).then(funct原创 2020-07-14 21:17:27 · 6220 阅读 · 1 评论 -
axios中qs用法
axios中的qs用法:一、什么时候需要用qs进行序列化:axios默认的content-type是application/json,即json格式,后台可以使用字符串进行接收,然后再解析即可:默认(不使用qs):发送请求:export const getOutList = params => { return service.post(launchReciveApiConfig.getOutList, params);}后台接收:使用字符串接收后,通过json方法获取需要数原创 2020-05-18 19:57:13 · 1088 阅读 · 0 评论 -
Property or method “xx“ is not defined on the instance but referenced during render
[Vue warn]: Property or method “activeNames” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.Property or method “原创 2020-05-13 09:13:55 · 19420 阅读 · 0 评论 -
Property or method "addToReciveObjectList" is not defined on the instance but referenced during rend
在使用vue时由于粗心遇到了一些问题,记录一下。Property or method “addToReciveObjectList” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the propert原创 2020-05-09 08:43:40 · 910 阅读 · 0 评论 -
Vue 指令相关用法
Vue相关用法:v-text 绑定数据,等价于 {{}}如下:<span v-text="msg"></span><span>{{ msg }}</span>v-once 一次性插值,不会更新<span v-once> {{ msg }}</span>原始htmlv-html 解析文本为html代码v-...原创 2019-08-16 17:35:04 · 121 阅读 · 0 评论 -
Vuex 学习及demo
Vuex:安装:npm install vuex --save在模块中使用:import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)开始,简单实现:--store.js代码:import Vue from 'vue'import Vuex from 'vuex'// 引用vuexVue.use(Vuex)c...原创 2019-08-21 08:43:17 · 173 阅读 · 0 评论 -
Vue Router 学习及demo
Vue Router :router的api:https://router.vuejs.org/zh/api/路由管理器,功能有:嵌套的路由/视图表模块化的、基于组件的路由配置路由参数、查询、通配符基于 Vue.js 过渡系统的视图过渡效果细粒度的导航控制带有自动激活的 CSS class 的链接HTML5 历史模式或 hash 模式,在 IE9 中自动降级自定义的滚动条行...原创 2019-08-21 08:41:49 · 381 阅读 · 0 评论 -
谷歌浏览器安装Vue.js devtools
网上有一种方式,通过github下载插件,npm包安装依赖,拖入浏览器扩展程序:方法链接感觉挺麻烦的,直接在谷歌商店安装即可:1.首先访问谷歌商店地址https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd2.将该插件添加到chrome即可。...原创 2019-08-19 14:53:37 · 198 阅读 · 0 评论 -
Vue 自定义方法
引言作为一个一个构建用户界面的框架,Vue 在定义其内置方法时有其特有的书写方式,这与典型的JavaScript书写方法有相通之处,但有其特点JavaScript函数典型的JavaScript定义函数方法有两种形式,一种为声明式定义,如下所示:function functionName(value1...){ //函数体}还有一种形式,为表达式定义,如下所示:var fun...转载 2019-07-27 18:29:55 · 5832 阅读 · 0 评论