- 三元三木根据判断返回的值的大小 显示颜色
- 去除表单的空格输入 利用watch监听
- v-for出来的数据 需要不同的背景色
- 多个状态值的背景色 以及根据不同的状态展示不同的点击方法
- 多个状态值展示不同的文字的简单方法
- 监听多个数据的方式,判断按钮 是否能否 点击
- 修改数组中某个字段
- filter修改要获取的数据
- 怎么把input当成子组件
- js 将字符串分割成的数组
- 后台给的是数字开头的字段名称
- 小数点保留点后位数的办法
- 返回页面的顶部
- 通过find 查找一下数据
0:Vue 常用 transition 动画效果记录 - 判断数组A是否跟数组B中有相同的数据,如果有返回数据
- api的请求封装实例
- unipp中的页面跳转的一些方法
- 两个数据的合集
- scroll-view横向滚动切换样式切换
- 获取地址栏中的某个字段的值
1:三元三木
根据判断返回的值的大小 显示颜色
:class="throwNum <= 0? '':'ys'"
2:去除表单的空格输入 利用watch监听
<input type="text" class="test" v-model="message">
watch: {
// 第一种方法
message: function() {
const reg= /\s/;
if(reg.test(this.message)){
this.message = this.message.replace(reg,'');
return;
}
}
// 第二种方法
message: function(val, oldVal) {
this.message= this.message.replace(/\s+/g, '');
},
}
3:v-for出来的数据 需要不同的背景色
参考:https://www.jianshu.com/p/023e41262c95
<div :class="['treeBg'+ index,'bgIconWd']" v-for="(tree,index) in treeArr" :key="index">
<span class="treeName">{{tree.tree_name}}</span>
</div>
.treeBg0{
background:red;
}
.treeBg1{
background:#555;
}
4:多个状态值的背景色 以及根据不同的状态展示不同的点击方法
1:generateClassName 方法是进行根据不同的状态进行渲染class
2:onMethods 是根据不同的状态 展示 不同的方法 这里的是,只有状态值为-1,-2的时候才调取方法 ,否侧没有啥反应
// 第一种::class="['finish' + item.status,'bold']"
//第二种
<span :class="generateClassName(item.status)" @click="onMethods(item.status)">
{{item.text}}
</span>
methods:
onMethods(type) {
switch (type) {
case -1:
this.taskSettle(id);
break;
case -2:
this.taskAdd(id);
break;
}
},
// 领取奖励
taskSettle(id) {
console.log('taskSettle');
},
// 领取任务
taskAdd(id) {
console.log('taskSettle');
},
generateClassName(index) {
// 调用方法,动态生成index
return `finish${index}`
},
css:
.finish-2 {
background-color: red;
color: #fff;
}
.finish-1 {
background-color: #07C160;
color: #fff;
}
.finish0 {
background-color: #FF6034;
color: #fff;
}
.finish1 {
background-color: #55C5FF;
color: #fff;
}
5:多个状态值展示不同的文字的简单方法
第一种
1:首先你要有一个返回给你所有的状态都是正整数的状态数组
status的状态值为 0 开始,1进行 2完成
template:
<span>{{stateList[item.status]}}</span>
data:
stateList:['开始','进行','完成']
第二种
可以看出来 下面的后台返回的数据中 没有text这个 字段。只有状态值,我需要根据状态值 去跟statusList中进行一一的匹配看是否有符合的值,如果有 就返回对应的text值 对v-for出来的数据行进赋值
template:
<span>
{{item.text}}
</span>
data:
statusList: [{state: -2,text: "领取"}, {state: -1,text: "领取奖励"}, {state: 1,text: "完成"}, {state: 0,text: "进行中"}],
后台返回的数据:
taskList:[
{status: -2,task_name: "我是领取的任务"},
{status: -1,task_name: "我是领取奖励"},
{status: 0,task_name: "我是完成的任务"},
{status: 1,task_name: "我是进行中"},
]
methods:
let statusList = this.statusList;
let taskList = this.taskList;
statusList.filter(item => {
taskList.map((list, i) => {
if (item.state == list.status) {
list.text = item.text
}
})
})
6:监听多个数据的方式,判断按钮 是否能否 点击
<Button type="primary" :disabled="disabled" @click="submit">确定</Button>
data:{
oldAlipay: '',
newAlipay: '',
disabled: true,
}
computed: {
changeData() {
const { oldAlipay, newAlipay} = this
return {
oldAlipay,
newAlipay,
}
}
},
watch: {
changeData(e) {
const { oldAlipay, newAlipay} = e
if (oldAlipay&&newAlipay) {
this.disabled = false
} else {
this.disabled = true
}
}
}
7:修改数组中某个字段
var list = res.data.list;
// console.log(res.data.list)
list.forEach((item,index)=>{
list[index].create_time = item.create_time.substr(0,10);
})
this.newsList = list;
8:filter修改要获取的数据
需求:我要拿到后台给的 tree_cid 为2的数据,但是后台把所有的tree_cid 类型都给了,我们需要处理一下
方法1:filter
var treeList = [];
list.filter(item=>{
if(item.tree_cid == 2){
treeList.push(item);
}
})
这样子就拿到tree_cid 为2的数据了 然后在复制给我们的数组
方法2:forEach
var treeList = [];
list.forEach((item,index ) => {
if(item.tree_cid == 2){
treeList.push(item);
}
})
this.list = [...this.list, ...treeList]
这样子就拿到tree_cid 为2的数据了 然后在复制给我们的数组
9:怎么把input当成子组件
<view class="iptbox">
<view class="name">{{nametxt}}</view>
<view class="ipt flexbox">
<input type="text" :value="writeData" :placeholder="holdertxt" @input="$emit('input', $event.target.value)" />
<view v-show ="type =='code'">
<button class="codeTxt" @click="getMsgCode" :disabled="codeDisabled">{{btntxt}}</button>
</view>
</view>
</view>
<script>
export default {
props:['nametxt','holdertxt','writeData','type','btntxt','codeDisabled'],
data(){
return{
title:"我的"
}
},
// 方法
methods:{
getMsgCode(index){
this.$emit('getMsgCode',index);
}
},
}
</script>
<style scoped lang="less">
.iptbox{
margin-top: 40rpx;
.name{
font-size: 28rpx;
}
.ipt{
margin-top: 40rpx;
padding-bottom: 20rpx;
border-bottom: 1px solid #2D3C51;
input{
font-size:32rpx;
color:#8797AE;
}
}
}
</style>
父组件调用
// 子组件名称
import ipt from '@/components/ipt.vue';
// 组件
components: {
ipt
},
//密码
<ipt nametxt='登录密码' holdertxt='请输入您的登录密码' :writeData="password" v-model="password"></ipt>
// 短信的
<ipt nametxt='短信验证码' holdertxt='请输入短信验证码' :writeData="code" v-model="code" type='code' :btntxt='btntxt' :codeDisabled='codeDisabled' @getMsgCode='getMsgCode'></ipt>
10:js 将字符串分割成的数组
data(){
return{
noticeData:[],
}
}
let article = result.article.article_content;
app.mySplit(article,20);
mySplit(str, leng) {
let arr = [];
let index = 0;
while (index < str.length) {
arr.push(str.slice(index, index += leng));
}
this.noticeData = arr;
},
11:后台给的是数字开头的字段名称
如图:
res.data.result['223_fee']
12:小数点保留点后位数的办法
第一种 函数的方法(推荐)
function getFloat(number, n) {
n = n ? parseInt(n) : 0;
if(n <= 0) {
return Math.round(number);
}
number = Math.round(number * Math.pow(10, n)) / Math.pow(10, n); //四舍五入
number = Number(number).toFixed(n); //补足位数
return number;
};
conosle.log(getFloat(数字, 位数))
conosle.log(getFloat(0, 4)) //0.0000
conosle.log(getFloat(0.2664356, 4)) //0.2664
第二种 正则表达式
var number= 3.4646431364433
var number= String(number).replace(/^(.*\..{4}).*$/,"$1");
console.log(Number(number)) //3.4646
第三种
var a = 9.39393;
console.log(a.toFixed(2)); //9.39
第四种
<div class="middle overfont">
{{number | numFilter}}
</div>
filters: {
// 截取当前数据到小数点后两位
numFilter(value) {
let realVal = parseFloat(value).toFixed(6)
return realVal
}
},
第五种
{{Number(number).toFixed(4)}}
13:返回页面的顶部
const handleScroll = () => {
window.addEventListener('scroll', () => {});
}
const scroll = (event) => {
console.log("监听滑动高度", event);
}
14:通过find查找数据
数据:data:[{name: "coupon", title: "优惠券入口", value: "1"},{name: "tel", title: "电话", value: "400-666-888"},{name: "coupon", title: "优惠券入口", value: "1"}]
// 拿到优惠券的value
const obj = data.find((item) => item.name === "coupon");
console.log(obj.value) // 输出 1
15:判断数组A是否跟数组B中有相同的数据,如果有返回数据
dataA:['北京','上海','济南'];
dataB:['北京','济南']
// 1:通过循环 给dataA添加 isChack属性
let checkList = []
dataA.forEach((item, index) => {
checkList.push({
name: item,
isCheck: 0
})
})
console.log(checkList) // [{name: "北京", isCheck: 0},{name: "上海", isCheck: 0},{name: "济南", isCheck: 0},]
// 进行判断
checkList.forEach((item, index) => {
dataB.forEach((item2) => {
if (item.name == item2) {
item.isCheck = 1;
}
})
})
console.log(checkList) // [{name: "北京", isCheck: 1},{name: "上海", isCheck: 0},{name: "济南", isCheck: 1}]
16:api接口的请求封装
axios.js
import axios from 'axios';
const service = axios.create({
baseURL: process.env.NODE_ENV == 'development' ? 'http://www.xxxx.com/' :'http://www.xxxx.com/',
timeout: 50000,
headers: {
'content-type': 'application/x-www-form-urlencoded',
},
});
// 請求攔截
service.interceptors.request.use((config) => {
let token = localStorage.getItem('token');
if (token) {
config.headers = {
"token": token,
}
}
return config;
},
(error) => {
// 对请求错误做些什么
return Promise.reject(error);
}
);
// 返回攔截
service.interceptors.response.use(
(response) => {
const res = response.data;
if (response.status == 200) {
if (res.code === 0) {
uni.$u.toast(res.msg);
}
return Promise.resolve(res);
} else {}
},
(error) => {
if (error.request.status == 401) {
localStorage.removeItem('token');
uni.switchTab({
url: '/pages/login/index'
})
}
if (error.request.status == 500) {}
return Promise.resolve(error);
}
);
export default service;
index.js(接口请求)
import service from './axios.js'
// post
export const game = (data) => {
return service.post('/api/xxxxx',data)
}
// get
export const getsubmitChuZhi =(data)=> {
return service.get(`/api/xxxxx?type=${data.type}&state=${data.state}`);
}
17:unipp中的页面跳转的一些方法
// 这里为tab的页面 要在这里写一下
export const getTabBarLinks = () => {
const tabBarLinks = [
'pages/tabBar/home/index',
'pages/tabBar/carTrade/index',
'pages/tabBar/service/index',
'pages/tabBar/shop/index',
'pages/tabBar/personal/index'
]
return tabBarLinks
}
/**
* 跳转到指定页面url
* 支持tabBar页面
* @param {string} url 页面路径
* @param {object} query 页面参数
* @param {string} modo 跳转类型(默认navigateTo)
*/
export const navTo = (url, query = {}, modo = 'navigateTo') => {
if (!url || url.length == 0) {
return false
}
// tabBar页面, 使用switchTab
if (util.inArray(url, getTabBarLinks())) {
uni.switchTab({
url: `/${url}`
})
return true
}
// 生成query参数
const queryStr = !util.isEmpty(query) ? '?' + util.urlEncode(query) : ''
// 普通页面, 使用navigateTo
modo === 'navigateTo' && uni.navigateTo({
url: `/${url}${queryStr}`
})
// 特殊指定, 使用redirectTo
modo === 'redirectTo' && uni.redirectTo({
url: `/${url}${queryStr}`
})
return true
}
引用
main.js
import {navTo} from '@/utils/app // 上述文件的所在位置
Vue.prototype.$navTo = navTo
// 跳转方式
// 不需要传参
this.$navTo('页面')
需要传参
this.$navTo('页面', {mode: 'cart',goods_ids})
this.$navTo('页面', {goods_ids})
接受跟原来一样 onload
18:两个数据的合集
/**
* 数组交集
* @param {Array} 数组1
* @param {Array} 数组2
* @return {Array}
*/
export const arrayIntersect = (array1, array2) => {
return array1.filter(val => array2.indexOf(val) > -1)
}
19. scroll-view横向滚动切换样式切换
<scroll-view class="scrollview-box bg-white sticky-tabs" scroll-with-animation scroll-x
:scroll-left="scrollLeft">
<view>
<view class="item" :class="index === current ? ' activeCurrent':''"
v-for="(item,index) in tablist" :key="index" :id="index" @tap="tabSelect(index,$event)">
<view>{{item}}</view>
</view>
</view>
</scroll-view>
data
current :0
computed: {
scrollLeft() {
return (this.current - 1) * 60;
}
},
tabSelect(index, e) {
this.current = index;
},
css
.scrollview-box {
white-space: nowrap; // 滚动必须加的属性
width: 100%;
padding: 0rpx 20rpx;
border-bottom: 1px solid #eee;
.item {
height: 90rpx;
display: inline-block;
line-height: 90rpx;
margin: 0 10rpx;
padding: 0 20rpx;
font-size: 16px;
}
.activeCurrent {
border-bottom: 2px solid #ffb401;
color: #ffb401;
}
}
20 获取地址栏的某个字段的参数
mounted(){
let location = window.location.href;
this.hash = this.getParam(location,"invitation");
}
methods:{
getParam(path, name) {
var reg = new RegExp("(^|\\?|&)" + name + "=([^&]*)(\\s|&|$)", "i");
if (reg.test(path))
return unescape(RegExp.$2.replace(/\+/g, " "));
return "";
},
}