vue常用代码
vue
程序猿_“大神”
这个作者很懒,什么都没留下…
展开
-
vue正则验证
<template> <div class="home"> <div> <div> <input type="text" v-model="formData.mobile" placeholder="请输入手机号"><span v-show="mobileFlag">{{formData.mobileMsg}}</span> </div> <.原创 2022-03-07 16:04:53 · 1885 阅读 · 0 评论 -
Top切换
//发送数据的唯一ID或唯一的字符 item 是v-for里面的数据 class是Top栏改变样式 <div @click="change(item.shortName)" :class="{ active: flag == item.shortName}"> </div> //如果值是tj 就显示 <div v-if="flag=='tj'"> //显示flag==tj的数据 </...原创 2022-02-25 15:40:30 · 631 阅读 · 0 评论 -
设定自定义颜色
先创建一个块 :style的内容是从vuex获取的值 <div class="color" :style="{ background: $store.state.color }"></div> <button @click="changeColor" :style="{ color: $store.state.color }"> 修改主题色 </button> .color{ wi...原创 2022-03-02 10:22:35 · 295 阅读 · 0 评论 -
三元运算符,添加不同颜色的方式
<div v-for="(item, index) in left" :key="index"> <i :style="{'background':index===0?'red':index===1?'#ff6f19':index===2?'#ffac00':'#585757'}">{{ index + 1 }}</i> <span>{{ item }}</span></di.原创 2022-02-24 17:19:37 · 1384 阅读 · 0 评论 -
vuex 持久化
先下载 vuex-persist 插件安装: cnpm i vuex-persist --save在store/index.js中引入import vuexPersist from "vuex-persist"创建一个对象进行配置,并引入到vuex中state: {},plugins: [ new vuexPersist({ storage: window.localStorage, }).plugin]如果刷新某个视图页面..原创 2022-03-03 18:59:32 · 123 阅读 · 0 评论 -
vue3 随机切换背景图片
<template> <div> <!-- :style="{ backgroundImage: `url(${data.backgroundImage})` }" 背景图片,可变量 --> <div class="home" :style="{ backgroundImage: `url(${data.backgroundImage})` }"></div> <button @click="changeIma.原创 2022-03-08 20:10:20 · 2781 阅读 · 0 评论 -
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:25 · 77 阅读 · 0 评论 -
vue3父子传值
vue3 父子传值原创 2022-03-08 15:09:42 · 1254 阅读 · 0 评论 -
vue2 子传父,父传子,v-model双向绑定
父传子在components里面创建子组件aaaChild.vue//子组件<aaa-child :list="list" @add="add"></aaa-child>data() { return { list:[ { name:'小明', age:18 }, { name:'小红', age:16 } .原创 2022-03-21 13:32:36 · 1566 阅读 · 0 评论 -
vue 本地跨域
在vue开发中实现跨域:在vue项目根目录下找到vue.config.js文件(如果没有该文件则自己创建),在proxy中设置跨域module.exports = { devServer:{ proxy: { //配置跨域 '/dev-api': { //目标接口域名 ,dev-api 自定义标识,用来识别带dev-api的请求 target: '地址',// 实际需要访问的接口域名 changeOrigin:true,// 如果接口跨域,需.原创 2022-03-28 15:30:55 · 2019 阅读 · 0 评论 -
Vue 防抖与节流
节流:函数的节流就是预定一个函数只有在大于等于执行周期时才会执行,周期内调用不会执行。好像一滴水只有积攒到一定重量才会落下一样。 我们想要的是在规定时间内只能执行一次,比如1秒内只能执行一次.无论你点击多少次<button id='show'>抢购</button><div id="box">0</div>// 点击调用节流函数show.onclick = throttle(qianggou, 1000)...原创 2022-05-05 18:45:58 · 237 阅读 · 0 评论 -
vue路由详解
路由分为 编程式路由和声明式路由 定义路由对象const router = new VueRouter({ routes:[ { path: '/', name: '', // redirect: '/index', 路由重定向的位置(意思就是要把页面定向到哪一个页面) redirect: { // 可以是下面五种跳转方法中的任何一种方式原创 2022-03-11 15:19:41 · 265 阅读 · 0 评论 -
vue本地存储
export default { data() { return { title: "", status: false, list: [], }; }, methods: { //添加 add() { //添加一个变量 获取本地 let lists = JSON.parse(localStorage.getItem("list")) || []; //筛选数据 let .原创 2022-03-30 17:14:31 · 931 阅读 · 0 评论