Sokach321-CSDN博客

原创 vue中filters过滤器的使用

vue filters过滤器<template> //{{文本字符串 | 过滤函数}} <div>{message | stateFliter}</div></template>export default{ filters:{ stateFliter(val){ switch(val){ case true: return '同意'; case false: return '退回'; def

2022-02-25 16:03:55 338

自定义状态管理器store js文件状态管理器原理：用的是三方库Vue.use(Vuex) use 自定义插件，去调用install的方法export default new Vuex.Store({}) Store用于存储数据以及提供数据访问接口let Vue;//数据存储 class指es6类class Store{ //构造器 //在构造器中new一个vue，把外部的state拿进来 constructor(options){ this.vm = ne

2022-02-25 15:48:19 307

原创 vuex状态管理器的使用

vuex状态管理器的使用vuex是一个专为vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。State：驱动应用的数据源(单向数据流)View：以声明方式将state映射到视图(静态显示出来的数据源)Actions：处理用户在view上面操作而导致的状态变化(数据源变化追踪)vuex可以解决多个视图组件，包括父子组件，兄弟组件之间的状态共享；不同视图组件的行为需要变更同意状态。Vue组件接收交互行为，调用dis

2021-12-09 11:08:31 596

原创 vue中使用bus通信传参

vue中使用$bus通信新建bus.js文件import Vue from 'vue';// 总线，一些组件间简单的数据交流通过它来进行，比如侧边栏折叠。过于复杂的数据推荐使用Vuexconst bus = new Vue();export default bus;demo1.vue 传值//引入bus.js文件import Bus from "@/views/common/bus.js";methods:{ // 传值 handle(){ Bus.$emi

2021-07-15 16:17:42 1472

原创使用this.$refs.XXX修改某个元素样式并添加点击事件

使用this.$refs.XXX某个元素样式并添加点击事件<el-form :model="form" label-position="left" :rules="dataFormRules" ref="form"> <el-row :gutter="36"> <el-col :span="12"> <el-form-item label="名称" prop="name"> <el-input v-mod

2021-07-14 17:44:14 2284

原创 base64上传图片

base64上传图片<div class='img_box' id="img_box"> <img id="LogoImg" src="../../images/moren.png" onerror='this.src="../../images/moren.png"' data-preview-src="" data-preview-group="1" class="not-preview-auto"> <div class="img_tips">点击修改图片

2020-11-23 11:49:45 282

原创 vue路由 $router跳转

vue路由 $router跳转页面跳转：在src/views里新建项目文件夹,新建vue文件<templent> <div>  <el-button type="primary" @click="rout()">$router</el-button>  <router-lin

2020-10-24 17:34:59 124

原创 vue子传父、父传子点击弹框获取数据

vue子传父、父传子点击弹框获取数据vue子传父使用$emit传值子组件：<template> <div> <div slot="footer" class="dialog-footer"> <el-button @click="dialogFormVisible = false">取消</el-button> <el-button type="primary" @click="dialog

2020-10-24 16:13:06 1547 1

原创 vue+element-ui数据库0和1回显

vue+element-ui数据库0和1回显formatter 常用来格式化内容html<el-form-item label="是否可报名" prop="if_signup" :span="12"> <el-switch v-model="dataForm.if_signup" active-value="0" inactive-value="1"> </el-switch></el-form-ite

2020-10-16 11:20:35 614

原创 localstorage缓存

localstorage缓存localstorage生命周期永久，除非用户清除浏览器中的localStorage信息，否则永远存在；存放数据大小一般为5MB；仅在浏览器中保存，不参与服务器通信；Api调用： localStorage.setItem("key","value");//以“key”为名称存储一个值“value” localStorage.getItem("key");//获取名称为“key”的值 localStorage.removeItem("key");//删除名称为“ke

2020-09-19 15:53:30 542 1

原创公告滚动

公告滚动setInterval() 按照指定的时间周期（以毫秒计）来调用函数或计算表达式弊端：随着时间的推移内存占用会增多，时间长了可能会造成页面卡顿，严重的甚至浏览器崩溃clearInterval() 取消由 setInterval() 函数设定的定时执行操作<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport"

2020-09-19 15:35:19 481

原创动态检测文本字数

动态检测文本<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>动态检测文本</title> <link rel="stylesheet" href="..

2020-09-19 15:04:25 203

原创购物车商品数量加减

购物车商品数量加减Html<link rel='stylesheet' type='text/css' media='screen' href='../css/bootstrap.min.css'><script src="../js/jquery-1.12.4.js"></script><div style="width: 300px;margin: 30px auto 0;"> <form class="form-inli

2020-09-19 14:37:30 707

原创导航固定

导航固定<style> header { background-color: rgba(0, 0, 0, 0.2); } .leftMenu { list-style: none; margin: 0; padding: 0; } .leftMenu li { line-height: 36px; background-color: #f4f4f4; text-align: c

2020-09-19 14:10:01 100

原创 scrollTop返回顶部

scrollTop返回顶部<div class="top"></div><script> $('.top').click(function () { $('html,body').animate({ scrollTop: 0 }, 1000) }) </script>

2020-09-19 11:23:26 174

原创 tab选项卡切换

tab选项卡切换方法一：attr() 设置或返回被选元素的属性，接收两个参数，如果是两个参数则是将第二个参数设置为id值<style> .active { width: 300px !important; background: pink; box-shadow: -18px 6px 8px 0 rgba(0, 0, 0, 0.20); margin-left: -50px; border-radius: 4

2020-09-19 11:19:16 179

原创 get方法动态获取数据

get方法动态获取数据html：<ul id="newList"></ul>Js：// ajax $(function () { // 获取数据开始 $.ajax({ // 请求方式 get获取 post发送 type: 'GET', // 请求媒体类型 contentType: '

2020-09-19 10:07:41 567

原创点击删除弹出模态框提示是否删除confirm返回值

点击删除弹出模态框提示是否删除运用confirm返回值html<div class="col=md-12 text-center"> <button onclick="doDelete()" class="del btn btn-danger btn-lg" type="button">删除</button></div>js<script> // 删除 function doDelete()

2020-09-19 09:55:38 291

原创点击添加删除

点击添加删除html<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="http://gsycweb.eap2.net/resource/js/jquery-2.1.4.min.js"></

2020-09-19 09:05:16 125

weixin_43549976的博客