qq_42764387的博客

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

点击不同按钮显示不同的组件主要使用change事件调用方法，来保存当前所在按钮的value，再在组件中使用v-show来判断是否该显示组件示例：<el-radio-group v-model="tabPosition" @change="handleClick" style="margin-bottom: 30px;" class="navRadio"

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位手机号" ><

过滤器filter过滤器常用于文本格式化，放在双花括号插值和v-bind表达式可分为全局过滤器和局部过滤器此处展示局部过滤器（持续更新）html中<h2>总价格：{{totalPrice | showPrice}}</h2>vue实例中 filters:{ // 过滤器 showPrice(price){ return '￥' + price.toFixed(2) } }...

vue实例的生命周期vue生命周期?vue实例从创建到销毁的过程，就是vue的生命周期vue生命周期函数?vue的生命周期分为8个阶段:创建前后,载入前后,更新前后,销毁前后vue生命周期的各个阶段的具体情况?beforeCreate(创建前)实例完全被创建之前,vue实例的挂在元素$el和数据对象data都为undefined,还未初始化created(创建后)可以访问data,但dom未生成,$el未存在beforeMount(挂载前)vue实例的$el和d

JS高阶函数的使用​ 编程范式：命令式编程/声明式编程​ 编程范式：面向对象编程（第一公民：对象）/函数式编程（第一公民：函数）filter中的回调函数有一个要求：必须返回一个boolean值（true / false）当为true时，函数内部会将这次回调的n加入新的数组中，反之，函数内部会过滤掉这次的nconst nums = [10,69,45,199,121,88,210] // 需求1. 取出所有小于100的数字 let newNums = nums.filter(functi

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

使用v-model实现的小案例我们在下载软件的时候经常会选择复选框，才能点击下一步的按钮实现方法 <label for="affirm"> <input type="checkbox" id="affirm" v-model="isAgree"> I agree </label> <button :disabled="!isAgree">下一步</button> data : { isAgree : fa

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

获取表单内容v-on和v-bind，event.target返回触发此事件的元素，即事件的目标节点 <input type="text" :value="message" @keyup="change"/> data : { message:'hello', }, methods:{ change(event){ this.message = event.target.value //获取目标节点的值

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){

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的事件修饰符就是解决这个问题的

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>&

vue 的计算属性计算属性可以对数据进行简单的计算，再显示出来，对于methods来说，计算属性是有缓存的，如果数据不变，它会直接将缓存的数据显示出来计算属性一般是没有set方法的，仅有get，只读属性 data:{ message:'hello', fistName: 'FirstName', lastName: 'LastName' }, computed : { //计算属性一般不会设置set方法，只读属性 //

v-bindv-bind绑定数据和元素的属性内联样式的数组语法 <p :style="[finalSize,finalColor]">{{message}}</p> data:{ message:'hello', finalSize: {fontSize:'100px'}, finalColor: {color:'pink'} }内联样式的对象语法(不常用) <p :style

父子组件间的通信一、创建子组件创建全局组件 const cpn = Vue.component('cpn',{ template: '#mycpn' })创建模板<template id = "mycpn"> <div> <p>我是子组件</p> </div></template>在父组件中声明子组件 components:{ cpn }二、父子