VUE笔记

置顶 ThatITs

已于 2023-01-05 10:47:19 修改

阅读量776

点赞数

分类专栏： js基础 vue 文章标签： vue css javascript

于 2019-03-23 13:26:53 首次发布

本文链接：https://blog.csdn.net/qq_39603448/article/details/88759645

版权

vue 同时被 2 个专栏收录

34 篇文章 1 订阅

订阅专栏

js基础

11 篇文章 0 订阅

订阅专栏

三元三木根据判断返回的值的大小显示颜色
去除表单的空格输入利用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 "";
	},
}