分类：Vue

2020
10-08

vue中用 async/await 来处理异步操作

昨天看了一篇vue的教程，作者用async/await来发送异步请求，从服务端获取数据，代码很简洁，同时async/await已经被标准化，也是需要学习一下了。先说一下async的用法，它作为一个关键字放到函数前面，asyncfunctiontimeout(){return'helloworld';}只有一个作用,它的调用会返回一个promise对象。调用一下看看就知道了，怎么调用？async函数也是函数，所以它的调用和普通函数的调用没有什么区别，直接加括号调用就可以... 继续阅读 >

2020
10-08

vue 使用async写数字动态加载效果案例

父组件<interval-number:number-content="blockHeight"v-if="blockHeight>0"></interval-number>importIntervalNumberfrom'./IntervalNumber.vue'components:{IntervalNumber,}子组件<template><spanclass="IntervalNumber">{{counter}}</span></template><script>exportdefault{name:'IntervalNumber',props:{numberContent:Number},data(){return{counter:this.numberContent,timeTicket:... 继续阅读 >

2020
10-08

vue-router为激活的路由设置样式操作

1.首先先写好类名2.在router里的js文件中添加linkActiveClass:'active'补充知识：记录vue遇到问题，子页面没有router-link对应导航栏激活样式如下所示：li><router-linkto="/basicSearch":class="{'link-active':linkBoolean}">基础检索</router-link></li>data(){return{imgUrl,linkBoolean:false}},created(){if(this.$route.path=="/storeDetails"||this.$route.path=="/utxoDetails"||this.$ro... 继续阅读 >

2020
10-08

解决Vue @submit 提交后不刷新页面问题

我就废话不多说了，大家还是直接看代码吧~<form@submit="add"><!--表单--></form>add:function(e){//阻止页面刷新e.preventDefault();//逻辑代码},补充知识：@submit.prevent阻止默认事件提交例如：以上这篇解决Vue@submit提交后不刷新页面问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持自学编程网。... 继续阅读 >

2020
10-08

vue+elementui实现点击table中的单元格触发事件--弹框

elementui中提供了点击行处理事件查看位置：elementui的table事件elementui的table中怎样点击某个单元格触发事件？可以先看一下官网中table的自定义列模板代码<template><el-table:data="tableData"borderstyle="width:100%"><el-table-columnlabel="日期"width="180"><templatescope="scope"><el-iconname="time"></el-icon><spanstyle="margin-left:10px">{{scope.row.date}}</span></temp... 继续阅读 >

2020
10-08

vuejs element table 表格添加行,修改,单独删除行,批量删除行操作

1.表格动态添加，也可删除<template><divclass="TestWord"><el-button@click="addLine">添加行数</el-button><el-button@click="save">保存</el-button><el-table:data="tableData"style="width:100%"><el-table-columnprop="bookname"label="书名"><templateslot-scope="scope"><el-inputv-model="scope.row.bookname"placeholder="书名"></el-input></template></... 继续阅读 >

2020
10-08

vue element table中自定义一些input的验证操作

官网原话Form组件提供了表单验证的功能，只需要通过rules属性传入约定的验证规则，并将Form-Item的prop属性设置为需校验的字段名即可。表单el-form表单必备以下三个属性：:model="ruleForm"绑定的数据内容:rules="rules"动态绑定的rules，表单验证规则ref="ruleForm"绑定的对象template模块其实问题关键就在于如何给el-form-item动态绑定prop:prop="'tableData.'+scope.$index+'.字段名'"<template><divclass="Tes... 继续阅读 >

2020
10-08

vue cli4.0项目引入typescript的方法

现有的项目是采用vuecli4.0脚手架生成的，现在想要引入typescript。1.执行安装命令npminstall--save-devtypescriptnpminstall--save-dev@vue/cli-plugin-typescript2.根目录下新建tsconfig.json{"compilerOptions":{"target":"esnext","module":"esnext","strict":true,"importHelpers":true,"moduleResolution":"node","experimentalDecorators":true,"esModuleInterop":true,"allowSynthet... 继续阅读 >

2020
10-08

Vue如何基于vue-i18n实现多国语言兼容

vue中使用vue-i18n兼容多国语言1.安装：npminstallvue-i18n--save-dev2.在main.js文件中引入：importVueI18nfrom'vue-i18n'Vue.use(VueI18n)//通过插件的形式挂载，通过全局方法 Vue.use() 使用插件consti18n=newVueI18n({locale:'zh',//语言标识//this.$i18n.locale//通过切换locale的值来实现语言切换messages:{'zh':require('./VueI18n/language-zh'),//'en':require('./VueI18n/langu... 继续阅读 >

2020
10-08

vue 点击其他区域关闭自定义div操作

方法一：在外层div添加事件@click="closeSel"htmlmethodcloseSel(event){varcurrentCli=document.getElementById("sellineName");if(currentCli){if(!currentCli.contains(event.target)){//点击到了id为sellineName以外的区域，隐藏下拉框this.listLineUl=false;}}}方法二、element.addEventListener(event,function,useCapture)mounted中document.addEventListener('click',e=>{if(... 继续阅读 >

2020
10-08

vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作

这里使用的是给被点击的li添加类名的方式<template><divclass="person1"><divv-for="(item,index)inlists"@click="clickAdd(index)":key="index":class="{red:i===index}"><div>{{item.name}}</div></div></div></template><script>exportdefault{data(){return{isShow:false,i:null,lists:[{id:1,name:'rose'},{id:2,name:'mike'},{id:3,name:'jerry'}]}},met... 继续阅读 >

2020
10-08

利用Vue的v-for和v-bind实现列表颜色切换

需求：在页面上显示四个列表，初始时字体为黑色。鼠标点击某一个列表时，该列表的颜色变为红色，其余列表仍为黑色。代码实现：<!--css--><style>.red{color:red;}</style><!--html--><divid="app"><ul><liv-for="item,indexinmovies":class="{red:changeRed==index}"v-on:click="change(index)">{{item}}</li></ul></div><!--JavaScript--><scriptsrc="../JS/vue.js"></script><script>constapp=newVu... 继续阅读 >

2020
10-08

Vue实现背景更换颜色操作

如下所示：<!--分页上下页改变背景图效果--><!DOCTYPEhtml><html><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><title></title><linkrel="stylesheet"href=""><scripttype="text/javascript"src="../node_modules/vue/dist/vue.js"></script><styletype="text/css"media="screen">.page{list-style:none;}.page>li{float:left;margin-left:10px;}.pag... 继续阅读 >

2020
10-08

最全vue的vue-amap使用高德地图插件画多边形范围的示例代码

一、在vue-cli的框架下的main.js(或者main.ts)中引入高德插件，代码如下：importVuefrom'vue'importVueAMapfrom'vue-amap'importElementUIfrom'element-ui'importAppfrom'./App.vue'importrouterfrom'./router'importstorefrom'./store'import'./registerServiceWorker'Vue.use(VueAMap)Vue.use(ElementUI)VueAMap.initAMapApiLoader({//高德的keykey:'你的高德key',//插件集合plugin:['AMap.Autocomp... 继续阅读 >

2020
10-08

Vue 实现v-for循环的时候更改 class的样式名称

在v-bind:class上绑定索引函数<divv-for="(shop,index)inshoplist"style="max-width:20rem;"v-bind:class="calculate(index)">calculate(index)此处必须添加index参数data(){return{colorList:['primary','danger','secondary','info']}},methods:{calculate(index){varnm=this.colorList[Math.floor(Math.random()*this.colorList.length)];return"cardmb-3col... 继续阅读 >

2020
10-08

vue点击标签切换选中及互相排斥操作

单身和已婚不能同时选中，不了解保险和已了解保险不能同时选中。同时各个标签点击可以取消选择//html<li><spanclass="fill-title">与我相关</span><div><van-buttonv-for="(item,index)inmyself":key="index"@click="checkButton('myself',item.id)":class="item.isFlag?'current':''">{{item.title}}</van-button></div></li><li><spanclass="fill-title">标签</span>... 继续阅读 >