vue.js
water_Popcorn
这个作者很懒,什么都没留下…
展开
-
vue 数据加载完成后加载组件
html源码:<template>//:is里面装的是组件名称 :child="child"是指子组件需要的数据<component:is="isComponent":child="childValue"></component></template>js源码:data(){return{childValue:{data:[],},isComponent:"",...原创 2021-06-07 09:59:14 · 1690 阅读 · 0 评论 -
vue 解决[Vue warn]: Missing required prop: “index“
问题描述:控制台报错[Vue warn]: Missing required prop: "index"解决方法:在使用el-submenu时,index=””属性忘记了,加上index=””即<el-submenuindex=""></el-submenu>问题解决原创 2021-03-10 09:47:17 · 13233 阅读 · 2 评论 -
vue-cli中使用外部mixins混入
Js文件源码:const mixinsCommon = { data(){ return{ mes:'' } },methods:{//定义方法,该方法可以在多个文件中复用 alert(data) { this.mes=data alert(this.mes); }, }}export { mixinsCommon //exp原创 2020-12-25 10:35:20 · 231 阅读 · 0 评论 -
vue onclick事件调用vue的函数
html源码:<div><button onClick='detailsBtn()'>查看详情</button></div>js源码:created(){let that =this;window.detailsBtn=that.detailsBtn;},methods:{detailsBtn:function(){ console.log('调用成功');}...原创 2020-09-15 11:17:39 · 1381 阅读 · 0 评论 -
vue 全屏和退出全屏
html源码:<divid="allScreen"@click="showScreen"><div>全屏内容</div><spanv-if="!fullscreen">全屏显示</span><spanv-else-if="fullscreen">退出全屏</span></div>js源码data(){retur...原创 2020-09-14 11:18:22 · 1013 阅读 · 0 评论 -
vue for循环一次循环两条内容
js源码:<ul v-for="(item,index) in items"><slot v-if="index<items.length&&index%2==0> <li>{{items[index].name}}</li> <li v-if="index<items.length-1">{{items[index+1].name}}</li></slot>&...原创 2020-08-13 17:49:46 · 2181 阅读 · 1 评论 -
vue radio标签:type check failed for prop “disabled“. Expected Boolean, got String with value “true“.
问题描述:html:<el-radiolabel="6"disabled='true'>radio不可用</el-radio>报错:type check failed for prop "disabled". Expected Boolean, got String with value "true".解決方法:html:<el-radiolabel="6":disabled='radioType'>radio不可用</el-radi...原创 2020-07-16 09:36:35 · 3099 阅读 · 0 评论 -
vue 页面保留缓存和清除缓存
路由:routes:[{path:'/page1',name:page1',component:page1',meta:{keepAlive:true//true是保存缓存,false是不保存}},{path:'/page2',name:page2',component:...原创 2020-06-24 10:57:36 · 6638 阅读 · 0 评论 -
vue 同步axios控制台打印Promise {<pending>}__proto__: Promisecatch: ƒ catch()constructor: ƒ Promise()finally
问题描述:使用同步的axios访问接口,返回控制台打印console.log(this.func(id))问题解决:this.func(id).then(data=>{ //操作});...原创 2020-05-12 13:46:53 · 1760 阅读 · 0 评论 -
vue+高德地图 点击地图获取经纬度和详细地址
点击地图获取经纬度和详细地址原创 2020-04-30 10:10:28 · 5585 阅读 · 0 评论 -
vue 点击空白处,div隐藏
js源码:mounted(){//监听document.addEventListener("mouseup",event=>{varsp=document.getElementById("指定的id名称");if(sp){if(!sp.contains(ev...原创 2020-04-23 09:03:43 · 539 阅读 · 0 评论 -
vue axios中this.$router.push不起作用
问题描述:在测试接口的时候axios中this.$router.push跳转路由不起作用解决方法:在.then中加上.bind(this)改变this的指向axios.post("/login",param).then(function(response){//成功则返回成功的值...原创 2020-04-09 13:48:56 · 2561 阅读 · 0 评论 -
vuex getters中设置含参函数
vuex中的index.js:state:{count:5},// getter进行数据获取getters:{getState:(state)=>(data)=>{ //data为参数returnstate[data];}}vue组件中://获取当前的值...原创 2020-04-06 09:13:43 · 490 阅读 · 0 评论 -
vue ref在v-for中获取不到dom
问题描述:v-for中使用ref:<div v-for="(item,index)in list":key="index"ref="childName">{{item.childName}}</div>js中打印:getStyle(){console.log(this.$refs);}打印出来的是空数据。解决方法:在nextTi...原创 2020-03-31 09:55:07 · 1034 阅读 · 0 评论 -
vue ie报错:SCRIPT5022: [vuex] vuex requires a Promise polyfill in this browser.
错误描述:vuex] vuex requires a Promise polyfill in this browser.解析:因为vue项目中使用了ES6 Promise,而IE浏览器不支持解决方法:1、终端:npminstall--save-devbabel-polyfill2、我们用的vue-cli框架,在webpack.base.conf.js的modul...原创 2020-03-27 15:02:40 · 1169 阅读 · 0 评论 -
vue.js vue-cli组件引入外部的css文件
源码:<template><div class="page-Style"> //page-Style为page.css文件中的类名<div></template><style>@import"../../css/page.css"; //引号里面是css文件的路径</style>...原创 2019-09-24 17:06:37 · 2116 阅读 · 0 评论 -
elementui tab框切换的时候调用带参函数
js源码:watch: {activeName: function(参数) {//监听切换状态this.方法名(参数); // 这个参数对应activeName值}},原创 2019-07-25 16:58:37 · 1177 阅读 · 0 评论 -
vue.js 设置html页面的静态title
方法一:Router中index.js文件添加路由{ path: '/page1', //路由即将跳转的页面 name: 'page1', component: page1, meta :{ title: "我是静态title"} //设置page1页面的title的内容},...原创 2019-05-07 12:21:32 · 1902 阅读 · 0 评论 -
vue npm install时报-4048错误
问题:解决方法:右击vscode-->以管理员身份运行-->打开项目-->启动原创 2019-09-23 10:47:51 · 822 阅读 · 2 评论 -
vue 添加回车事件实现登录
js源码:created(){this.keyupSubmit();},methods: {keyupSubmit(){ //回车事件document.onkeydown=e=>{let _key=window.event.keyCode;if(_key===13){ //key=13即指示回车键this.login();}...原创 2019-08-21 09:42:54 · 2632 阅读 · 0 评论 -
vue/react 局域网内可以通过ip地址访问本地项目
解决方法:在package.json文件下加上一行代码:如图"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0",vue和react项目都可使用...原创 2019-08-23 18:04:02 · 3553 阅读 · 2 评论 -
vue.js oninput事件不能用?
javascript原有的 onput事件在vue项目中用不起来、oninput 事件在用户输入时触发。经过查阅等,得出vue项目中的oninput应该改为如下<inputtype="text"v-model="a" id="a"v-on:input="show()">划重点:v-on:input=""...原创 2019-05-29 11:56:18 · 2238 阅读 · 0 评论 -
vue.js 循环设置ref并在js中循环调用
Html源码:<trv-for="(item,index) inuserList" :key="index"><td>{{item.id}}</td><td>{{item.name}}</td><td:ref="'item'+index">{{item.age}}</td> //循环设置r...原创 2019-05-31 17:32:02 · 3967 阅读 · 0 评论 -
vue.js 实现点击某一标签就能获取当前点击标签的内容
以button为例html源码:<div id="app"> <button @click="showValue($event)">点我</button></div>script源码<script> new Vue({ el:"#app", data:{ ...原创 2019-05-23 18:21:53 · 5470 阅读 · 0 评论 -
vue.js 设置div的显隐交换
Vue源码:new Vue({el: '#app',data: {Showdiv1:true,//div1显示Showdiv2:false//div2隐藏} methods: {...原创 2019-05-07 17:18:21 · 1086 阅读 · 0 评论 -
vue.js axios的使用
首先安装 :npm install axios --savevue源码:<script>importaxiosfrom'@/axios' //导入axios exportdefault{data(){return{ List:[], ...原创 2019-04-30 16:06:05 · 638 阅读 · 0 评论 -
vue.js 如何跳转到外部网站
Vue源码:methods:{ ToWebsite (e) { return 'http://'+e; //获取传入的数据,若传入的数据时正确的网址,就可以调到外部网站 }}Html源码://this.List.website 这个是从后台获取回来的网址数据或者是data中的数据<a class="infodetail" :hre...原创 2019-04-28 17:10:42 · 7716 阅读 · 0 评论 -
vue.js 字符随机显示不同的颜色
以一个页面名称为例html源码:<div id="All"> <!--head--> <div id="head"> <p class="head_Name" v-for="word in words"> //v-for遍历js中的数组 {{word}} <...原创 2019-03-22 15:50:16 · 2307 阅读 · 0 评论 -
vue.js 实现跑马灯的效果
要求:点击“动起来”按钮实现跑马灯的效果(即字符自动滚动),点击“不要动”按钮实现跑马灯停止。html源码:<div id="go"> <button @click="fun">动起来</button> <button @click="stop">不许动</button> <p>{{ent}...原创 2019-03-25 22:01:39 · 799 阅读 · 0 评论 -
vue.js 在title插入自定义小图标
在index.html文件中插入这段话其中href="static/title.png"是指图片所在位置<linkrel="shortcut icon"type="image/x-icon"href="static/title.png">效果就类似如图文字前的图标...原创 2019-06-19 09:28:21 · 836 阅读 · 0 评论 -
vue ie报错:[Vue warn]: Error in v-on handler: "ReferenceError: “Promise”未定义"
错误描述:google登录模块可以实现,换成ie11后,项目报错-----[Vue warn]: Error in v-on handler: "ReferenceError: “Promise”未定义"原因:兼容ie解决:1、npm install --save-dev webpack-server 2、npm install --save babel-poly...原创 2019-08-20 09:29:25 · 16521 阅读 · 1 评论 -
vue.js 引入外部的js文件
js源码:importVue from'vue';letv = newVue();function方法一名称(message) {v.$alert(message, "提示", {confirmButtonText: '确定'});}function方法二名称(){history.go(0);}showPage(){Al...原创 2019-08-06 11:03:39 · 623 阅读 · 0 评论 -
vue vue-awesome-swiper轮播插件如何兼容ie9
轮播插件vue-awesome-swiper在ie9中运行的时候没效果解决方法:vue-awesome-swiper在IE9下报错, 主要原因是element.classlist.add()方法在ie9中是不支持的。 解决方法是加个ployfillnpm install classlist-polyfill --savenpm install babel-polyfill --...转载 2019-07-31 17:55:42 · 2692 阅读 · 0 评论 -
vue 父组件调用子组件的函数
用法: 子组件上定义ref="refName", 父组件的方法中用this.$refs.refName.method去调用子组件方法详解: 父组件里面调用子组件的函数,父组件先把函数/方法以属性形式传给子组件;那么就需要先找到子组件对象 ,即 this.$refs.refName.然后再进行调用,也就是this.$refs.refName.method如下:子组件:...转载 2019-07-12 10:51:14 · 186 阅读 · 0 评论 -
vue.js 遍历背景图片并渲染
html源码:<li v-for="(img, index) in imgArray"><div :style="{'backgroundImage':'url('+img.src+')'}"></div></li>js源码:import banner1 from "../assets/banner1-1.png";im...原创 2019-07-16 14:48:17 · 1852 阅读 · 0 评论 -
vue 跨域请求session的问题
main.js中插入importaxiosfrom'axios'axios.defaults.withCredentials=true原创 2019-07-10 10:28:16 · 730 阅读 · 1 评论 -
vue.js 将后台返回的带回车符的字符串在页面换行输出
js源码:this.str = this.str .replace(/↵/g,"\n");html源码:<pre>{{str}}</pre>原创 2019-06-25 10:12:00 · 7446 阅读 · 0 评论 -
vue.js 运用组件实现点赞按钮的功能
功能要求:点击点赞按钮,点赞数量加1,再次点击,取消点赞(即点赞数量再次减1)html源码:<div id="c"> <pic></pic></div>vue.js源码: Vue.component('pic',{ template:"<button @click='zan'>赞 {{like...原创 2019-03-25 18:40:59 · 4776 阅读 · 2 评论