积累篇-（es6解构，截取字符串方法,v-for循环渲染）

一.es6解构

基础概念：对数组或者对象进行模式匹配，然后对其中变量进行赋值，方便复杂对象中数据字段获取
参与对象：等号左边解构目标 解构源，在右边

1.基本使用

.1.let [a,[[b]],c] = [1,[[2]],3]

a=1 ,b=2,c=3
确保左边接受数据的变量类型和右边一样即可

2.当需要拿大量源数据时候

let [a, ,b]=[1,2,3]

3.不完全结构（我还没用到过）

let [a = 1,b]=[]
a=1,b=undifiend

4.使用剩余运算符

let [a,…b]=[1,2,3]
a=1 b=[2,3]

5.对字符串解构

let [a,b,c,d] = “best”
a=‘b’ b=‘e’ c=‘s’ d=‘t’

2.对象，数组解构

1.基本使用

1. let {bor for}={bor:‘m’,for:‘b’}
   bor=‘m’ , for=‘b’
2. let {bor:for}={bor:"fff}
   for=“fff”

2.嵌套，忽略使用

1.let obj={p:{‘hello’,{y:‘word’}}}
let {x:{y}} = obj
x=“hello” y=“word”
2.let obj={p:{‘hello’,{y:‘word’}}}
let {p:{x,{}}} = obj
x=“hello”

3.项目中的应用实例

使用数据库进行查询某个字段是否存在，返回的查询结果

现在只需要状态值 1，进行解构
const const {“count(*)”:b}=data[0]
得到b=1

二.flex布局+v-for渲染

1.实例一

实现点击对应日期，改变选中对象的颜色

使用flex布局对每个对象渲染

代码如下：

	<view class="time">
	//对英文星期几渲染
			<view style="display: flex;text-align: center;">
				<view v-for="(item,index) in liste" :key="index"  style="width: 120rpx;margin-left: 12rpx;box-sizing: border-box;">
				<view @click="clicked" :id='index' :class="[active==index?'item1':'']">{{item}}</view>
				</view>
			</view>
	//对日期进行渲染
			<view style="display: flex;text-align: center;">			
				<view v-for="(item,index) in list" :key="index"  style="width: 120rpx;margin-left: 12rpx;box-sizing: border-box;">
				<view @click="clicked" :id='index' :class="[active==index?'item1':'']">{{item}}</view>				
				</view>
				
			</view>

动态类实现给活跃的dome对象添加颜色

2.实例二

动态添加卡片

两者原理大同小异
代码如下

<view class="btm">
			<u-row gutter="16">
				<u-col span="4"  v-for='(item,index) in Target' :key='index'>
					<view class="demo-layout5 bg-purple5" style="text-align: center;"  @longtap="longtap(index,item)" :id='index' 
							 :class="[isactive==index?'isactive':'']">					
							<image src="../../static/Frame(5).png" mode="" style="width: 60rpx;height: 60rpx;"></image>
							<p>{{item.target_type}}</p>
							<p>{{item.start}}--{{item.end}}</p>						
					</view>
				</u-col>
			</u-row>
		</view>

直接使用uview框架里边的u-row ，u-col flex布局

@click(e)传过去的是鼠标默认事件，这时候我们可以使用里边的属性id 等
@click(index,item) 传过去的是绑定的两个变量

三.截取字符串方法

方法及介绍

slice() 提取字符串的片断，并在新的字符串中返回被提取的部分
split() 把字符串分割为子字符串数组
substr() 从起始索引号提取字符串中指定数目的字符
substring() 提取字符串中两个指定的索引号之间的字符