- 博客(19)
- 收藏
- 关注
RSS订阅原创 Vue filtters（过滤器）的使用
Vue filtters（过滤器）的使用// status是int类型，不同数值对应不同的状态，使用filters过滤实现了该功能<el-table-column prop="status" label="寄存状态" header-align="center" align="center"> <template slot-scope="scope"> {{scope.row.status | baseStateFilter}} </te
2021-03-14 10:29:20
542
原创 点击不同按钮显示不同的组件
点击不同按钮显示不同的组件主要使用change事件调用方法，来保存当前所在按钮的value，再在组件中使用v-show来判断是否该显示组件示例：<el-radio-group v-model="tabPosition" @change="handleClick" style="margin-bottom: 30px;" class="navRadio"
2021-03-01 09:22:53
1385
1
原创 el-radio-button 如何自定义选中时的颜色
el-radio-button 如何自定义选中时的颜色我试了伪类，el-radio-button还是不变颜色，在网上查找，发现在el-radio-group中加上fill=’#d4237a’ 即可。‘ ’里面可以是十六进制写法，也可以是英文名称（eg ：pink）。特别提醒一下，是在el-radio-group标签加上fill属性，而不是el-radio-button标签哦！...
2021-02-27 20:24:53
9354
6
原创 vue+element表单内容选填和必填
Vue表单内容选填，若填写，则必须按照既定的格式动态绑定rules，若dataForm.mobile为空，则不必填，反之，必填且遵循填写规则<el-form-item label="手机号" prop="mobile" :rules="dataForm.mobile? dataRule.mobile:[{required: false}]"> <el-input v-model="dataForm.mobile" placeholder="请输入11位手机号" ><
2021-02-25 12:10:14
3576
原创 过滤器filter
过滤器filter过滤器常用于文本格式化，放在双花括号插值和v-bind表达式可分为全局过滤器和局部过滤器此处展示局部过滤器（持续更新）html中<h2>总价格：{{totalPrice | showPrice}}</h2>vue实例中 filters:{ // 过滤器 showPrice(price){ return '￥' + price.toFixed(2) } }...
2021-02-22 11:42:15
57
原创 elementUI之checkbox绑定值
elementUI之checkbox绑定值checkbox绑定的是label的值并显示出来 <el-checkbox-group v-model="checkList"> <el-checkbox label="复选框 A"></el-checkbox> <el-checkbox label="复选框 B"></el-checkbox> </el-checkbox-group> //在data中
2021-02-20 15:35:54
3473
原创 vue实例的生命周期
vue实例的生命周期vue生命周期?vue实例从创建到销毁的过程，就是vue的生命周期vue生命周期函数?vue的生命周期分为8个阶段:创建前后,载入前后,更新前后,销毁前后vue生命周期的各个阶段的具体情况?beforeCreate(创建前)实例完全被创建之前,vue实例的挂在元素$el和数据对象data都为undefined,还未初始化created(创建后)可以访问data,但dom未生成,$el未存在beforeMount(挂载前)vue实例的$el和d
2021-02-19 11:40:00
123
原创 JS高阶函数的使用
JS高阶函数的使用 编程范式：命令式编程/声明式编程 编程范式：面向对象编程（第一公民：对象）/函数式编程（第一公民：函数）filter中的回调函数有一个要求：必须返回一个boolean值（true / false）当为true时，函数内部会将这次回调的n加入新的数组中，反之，函数内部会过滤掉这次的nconst nums = [10,69,45,199,121,88,210] // 需求1. 取出所有小于100的数字 let newNums = nums.filter(functi
2021-02-18 17:02:51
141
1
原创 v-model常用的修饰符
v-model常用的修饰符.lazy : 只有在按下回车键后，绑定的值才会改变<input type="text" v-model.lazy="message"><span>{{message}}</span>v-model默认传的值是String类型的，.number ：把绑定值的类型设置为number<input type="number" v-model.number="age"><span>{{typeof ag
2021-02-18 16:07:01
168
原创 点击复选框，显示按钮的实现
使用v-model实现的小案例我们在下载软件的时候经常会选择复选框，才能点击下一步的按钮实现方法 <label for="affirm"> <input type="checkbox" id="affirm" v-model="isAgree"> I agree </label> <button :disabled="!isAgree">下一步</button> data : { isAgree : fa
2021-02-18 15:55:44
514
原创 v-model的使用
v-model的使用v-model指令监听用户的输入事件以及更新数据，在 元素上创建双向数据绑定v-model与单选按钮结合 <label for="male"> <input type="radio" value="man" id="male" v-model="sex">man </label> <label> <input type="radio" value="woman" id="female" v-m
2021-02-18 15:45:56
127
原创 vue获取表单内容
获取表单内容v-on和v-bind，event.target返回触发此事件的元素，即事件的目标节点 <input type="text" :value="message" @keyup="change"/> data : { message:'hello', }, methods:{ change(event){ this.message = event.target.value //获取目标节点的值
2021-02-18 15:21:47
1087
原创 v-if相关
v-if若只有两个选择，常用v-if和v-else <h1 v-if=" score >= 90"> v-if </h1> <h1 v-else> v-else </h1>若需要多重判断，函数会更优<h3>{{ifTest()}}</h3> methods : { ifTest(){ let result= " "; if (this.score > 90){
2021-02-18 14:02:06
55
原创 v-on及其常用修饰符
v-onv-on可以监听DOM事件，同时在触发时可以运行一些js代码，其语法糖为@v-on可以绑定单个事件 <button v-on:click="myClick()">button</button>v-on可以绑定多个事件 <div v-on="{mouseout:outTest,mouseover:overTest}">click</div>为了使方法仅仅处理数据逻辑，而不是处理DOM事件的细节，v-on的事件修饰符就是解决这个问题的
2021-02-18 11:54:38
1292
原创 v-show和v-if的区别
v-show和v-if的区别v-show ：当条件为false时，相当于给元素添加一个行内样式display：nonev-if ：当条件为false时，元素不会出现在dom中如果需要频繁切换，使用v-show<div id = "app"> <h3 v-if="isShow" id="111">{{message}}</h3> <h3 v-show="isShow" id="222">{{message}}</h3>&
2021-02-18 09:33:47
72
原创 vue 的计算属性
vue 的计算属性计算属性可以对数据进行简单的计算，再显示出来，对于methods来说，计算属性是有缓存的，如果数据不变，它会直接将缓存的数据显示出来计算属性一般是没有set方法的，仅有get，只读属性 data:{ message:'hello', fistName: 'FirstName', lastName: 'LastName' }, computed : { //计算属性一般不会设置set方法，只读属性 //
2021-02-18 09:11:24
150
原创 v-bind
v-bindv-bind绑定数据和元素的属性内联样式的数组语法 <p :style="[finalSize,finalColor]">{{message}}</p> data:{ message:'hello', finalSize: {fontSize:'100px'}, finalColor: {color:'pink'} }内联样式的对象语法(不常用) <p :style
2021-02-10 11:45:58
50
原创 box-shadow
box-shadowbox-shadow是给元素快添加周边的阴影效果的h-shadow ：水平阴影位置（不可缺） 如果值为正值，则阴影在对象的右边，其值为负值时，阴影在对象的左边；v-shadow ：垂直阴影位置（不可缺） 如果为正值，阴影在对象的底部，其值为负值时，阴影在对象的顶部；blur 可选。模糊距离spread 可选。阴影的大小rgba（R，G，B，A） ：red，green，blue，透明度...
2021-02-05 12:29:16
61
原创 父子组件间的通信
父子组件间的通信一、创建子组件创建全局组件 const cpn = Vue.component('cpn',{ template: '#mycpn' })创建模板<template id = "mycpn"> <div> <p>我是子组件</p> </div></template>在父组件中声明子组件 components:{ cpn }二、父子
2021-01-31 22:15:35
165
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人