- 博客(18)
- 收藏
- 关注
RSS订阅原创 Vue中按需引入ECharts
1先安装npm install echarts --save 有淘宝镜像的可以选择 cnpm install echarts --save2：自己新建一个 js 文件3：js文件中的内容// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。import * as echarts from "echarts/core"; /** 引入柱状图and折线图图表，图表后缀都为 Chart */import { BarChart, LineChar
2022-04-25 18:50:27
1376
3
原创 按需引入 Ant Design Vu
1：第一步先下载npm i --save ant-design-vue有淘宝镜像的可以(更快一点)cnpm i --save ant-design-vue第二步在.babelrc文件里写入{ "plugins": [ [ "import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css"
2022-04-25 15:40:51
383
原创 vue2双向数据绑定全选反选问题解决方法
<template> <div class="home"> <div><input type="checkbox" :checked="checkAll" @click="check">全选</div> <div v-for="item in list" :key="item.id"> <input type="checkbox" v-model="item.check">{{item.na.
2022-03-18 14:51:18
1460
原创 vue3点击随机切换背景图片
利用点击事件触发随机数<template> <div> //背景图片可以变量 <div class="home" :style="{ backgroundImage: `url(${backimg})` }"></div> <button @click="qh">切换</button> </div></template> <script> import
2022-03-18 11:32:08
1169
原创 vue3 element-plus Menu 菜单使用方法
第一步在app.vue里配置顶栏<template> <div id="nav"> <div class="h-6" /> <el-menu default-active="/keng" class="el-menu-demo" mode="horizontal" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" r..
2022-03-18 11:09:12
15561
2
原创 解决vue接口跨域问题
首先要在当前文件的根目录下创建一个 vue.config.js 文件2.安装：cnpm install better-scroll@1.8.1 --save 引入：import Bscroll from 'better-scroll' 使用： 一定要用ref定义到最外层的大div 内层的div里面是要滚动的数据 <div ref="aaa"> <div></div> ..
2022-03-15 09:52:17
967
原创 vue实现点击字母切换对应的城市
安装：cnpm install better-scroll@1.8.1 --save 引入：import Bscroll from 'better-scroll' 使用： 一定要用ref定义到最外层的大div 内层的div里面是要滚动的数据 <div ref="aaa"> <div></div> </div> mounted() { t...
2022-03-15 09:49:10
1159
原创 Vue3 购物车逻辑
添加购物车了逻辑 state: { //购物车列表的数据 shopcar: [] },mutations: { add(state, value) { // 声明一个变量flag=false 如果是这个变量的值为false 代表购物车中有没有这个商品 let flag = false //循环购物列表的数据 state.shopcar.forEach(item => { //判断如果列表数据..
2022-03-11 14:41:28
242
原创 vue css样式重置
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, .
2022-03-11 14:36:15
595
原创 Element-Puls自动导入
1：安装 npm i unplugin-vue-components unplugin-auto-import -D 2：在vue.config.js中复制以下代码 const AutoImport = require('unplugin-auto-import/webpack')const Components = require('unplugin-vue-components/webpack')const { ElementPlusResolver} = require('.
2022-03-09 11:40:39
141
原创 正则验证 手机账号和密码正则验证方法
HTML点击验证手机号码和密码 <div> <div> <input type="text" v-model="formData.mobile" placeholder="请输入手机号"><span v-show="mobileFlag">{{formData.mobileMsg}}</span> </div> <div> <input type
2022-03-07 16:41:13
526
原创 vue3.0使用vuex的过程
在vue3中使用vue2中的写法也可以 但是这里我们使用组合api来使用vuex的数据和各种方法打开store中的index.js 代码如下// 可以看出与vue2的写法有些区别，但是用法一样// 但是需要注意的是如果在创建项目时没有安装vuex 则需要自己安装 安装命令是 npm install vuex@next --save 这里需要注意命令的不同 安装的版本就不同import { createStore } from 'vuex'export default createStor
2022-03-01 18:22:13
209
原创 vue 使用v-if v- else tab切换数据对应数据方法
//tab拦<div class="nav1"> <span v-for="(item, index) in typeList" :key="index" @click="navClick(item.shortName)" :class="{actives:flag==item.shortName}"> {{item.name}} </span> </div>/...
2022-02-28 20:03:45
382
原创 vue的三元运算符运行方法
<i :style="{'background-color':index ===0 ? 'red' :index ===1 ? 'orangered' : index === 2 ? 'orange' : 'rgb(196, 195, 195)'}">
2022-02-24 16:56:52
1297
原创 vue3.XX使用vuex的过程
在vue3中使用vue2中的写法也可以 但是这里我们使用组合api来使用vuex的数据和各种方法打开store中的index.js 代码如下// 可以看出与vue2的写法有些区别，但是用法一样// 但是需要注意的是如果在创建项目时没有安装vuex 则需要自己安装 安装命令是 npm install vuex@next --save 这里需要注意命令的不同 安装的版本就不同import { createStore } from 'vuex'export default createSto
2022-02-23 10:04:41
129
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人