Vue之内置指令（基本、条件、列表渲染）

àì夳堔傛蜴生んèń 2023-06-07 12:03 47阅读 0赞

**今天咱们分为七个部分，如下**

*  （1）JS迭代器
 *  （2）遮罩指令v-cloak
 *  （3）多条件渲染指令v-if、v-else-if、v-else
 *  （4）列表渲染指令v-for
 *  （5）列表渲染指令标识符key属性
 *  （6）key属性由来与虚拟DOM
 *  （7）diff微分算法

# 第一：JS迭代器 #

\*\*迭代器模式是一种相对简单的模式，迭代器的使用可以极大地简化数据操作，目前的绝大部分语言都内置了迭代器  
\*\*

*  **（1）forEach迭代器**
    
     *  forEach方法接收一个**函数**作为参数，对数组中每个元素使用这个函数，只调用这个函数，数组本身没有任何变化，即**不改变原始数组**

var array_list = [11, 22, 33, 44, 55, 66]
    		array_list.forEach(function(item, index, self) {
    			console.log(item) /* 迭代项、迭代源目标 */
    			console.log(index) /* 迭代索引、下标 */
    			console.log(self) /* 迭代数据本身 */
    		})

*  **（2）map迭代器**
    
     *  map迭代器和forEach有些类似，**区别：可以生成新数组**

//使用map迭代器生成新的数组
    		var array_list = [11, 22, 33, 44, 55, 66]
    		var new_array = array_list.map(add)
    
    		function add(x) {
    			//console.log(item) /* 迭代项、迭代源目标 */
    			//console.log(index) /* 迭代索引、下标 */
    			//console.log(self) /* 迭代数据本身 */
    			console.log(x * 2)
    		}

*  **（3）every迭代器**
 *  every方法接受一个返回值为**布尔类型的函数**，对数组中每个元素使用这个函数，如果对于所有元素，该函数均返回true，则该方法返回true，否则返回false
    
        var array_list = [2, 4, 6, 8, 10]
         function evenFn(num) {
         	return num % 2 == 0
         }
         console.log(array_list.every(evenFn))

![在这里插入图片描述][20191014194536518.png]  
**应用场景：全选和全不选的业务逻辑**

*  **（4）some迭代器**
 *  some方法也是接受一个返回值为布尔类型的函数，只要有一个元素使得该函数返回true，该方法就返回true

var array_list = [21, 41, 61, 81, 10]
    		function evenFn(num) {
    			return num % 2 == 0
    		}
    		console.log(array_list.some(evenFn))

![在这里插入图片描述][20191014194637854.png]  
**应用场景：批量删除时有一个选中即可**

**（1）遍历对象for-in，条件遍历中的var可以省略**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70]

*  **这里补充下JS遍历操作中常见的for-in**
    
     *  作用：用于对数组或者对象的属性进行循环操作
 *  语法如下：  
    ![在这里插入图片描述][20191014195243553.png]
 *  案例如下：  
    ![在这里插入图片描述][20191014195406361.png]  
    **小结：**
    
     *  ①for … in 循环中的代码每执行一次，就会对数组的元素或者对象的属性进行一次操作
     *  ②数组的键名是数字，但是for…in循环是以字符串作为键名“0”、“1”、“2”等等，而key为string类型，可能会意外导致如：‘2’ 1 == ‘21’
     *  ③某些情况下，for…in循环会以任意顺序遍历键名
     *  注意：总之，for…in循环主要是为**遍历对象**而设计的，不适用于遍历数组

**（2）遍历对象键–Object.keys()**

*  构造函数Object里面自带的方法Object.keys()（取键名）

for (i in person) {
    				console.log(person)
    			}
    			console.log(Object.keys(person))

**（3）遍历对象值–Object.values**

*  构造函数Object里面自带的方法Object.values()（取键值）

for (i in person) {
    				console.log(person)
    			}
    			console.log(Object.values(person))

**（4）for…of遍历，优点如下：**

*  ①有着同for…in一样的简洁语法，但是避开了 for-in 循环的所有缺陷
 *  ②for-of 循环不支持普通对象，但如果你想迭代一个对象的属性，可以用 for-in 循环（这也是它的本职工作）或内建的  
    Object.keys() 方法  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 1]  
    **for…of遍历：（对比记忆v-for in/of）**  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 2]

# 前言 #

*  之前已经介绍过指令（Directive）的概念了，Vue.js的指令是带有特殊前缀“v-”的HTML特性，它绑定一个表达式，并将一些特性应用到DOM上。
 *  目前用到过很多Vue内置指令，例如v-html、v-pre、v-bind等，本节继续讲解Vue常用的内置指令。

## 基本指令之v-cloak ##

**v-cloak不需要表达式，它会在Vue实例编译结束时从绑定的HTML元素上移除，经常和CSS的display:none;配合使用。**

*  这时虽然已经加了指令v-cloak，但其实并没有起到任何作用。当网速较慢、Vue.js文件还没加载完成时，页面上会显示\{ \{name\}\}字样，直到Vue创建实例、编译模板时，DOM才会替换，所以这个过程屏幕是有闪动的。

在这里插入代码片<body>
    		<div class="demo" v-cloak>
    			{
       {name}}
    		</div>
    	</body>
    	<script type="text/javascript">
    		//v-cloak不需要表达式，它会在Vue实例编译结束时从绑定的HTML元素上移除，经常和CSS的display:none;配合使用。
    		var demo = new Vue({
    			el: '.demo',
    			data: {
    				name: '熊大'
    			}
    		})
    	</script>

*  对于屏幕闪动，只要在v-cloak基础上再加一句CSS即可

[v-cloak] {
    				display: none;
    			}

*  一般情况下，v-cloak是解决初始化慢导致页面闪动的最佳方案，对于简单项目很实用。但在工程化的项目里，项目的HTML结构只有一个空的div元素，剩余的内容都是由路由去挂载不同组件完成的，所以不再需要v-cloak。

## v-if指令回顾 ##

*  指令主要职责就是当表达式值改动时，相应的将某些行为应用到DOM上，以v-if为例
 *  v-if指条件性渲染，为true时渲染DOM，否则不进行渲染：  
    ![在这里插入图片描述][20191014200810212.png]
 *  数据驱动DOM是Vue.js的核心理念，所以尽量避免直接操作DOM，只需要维护关注数据即可，DOM的事Vue会进行处理。

## 条件渲染指令v-else ##

*  与JS条件语句if、else-if、else类似，Vue条件指令也可以根据表达式的值在DOM中创建或销毁元素/组件。
 *  例如v-if与v-else，使用 v-else 指令来表示 v-if 的“else 块”  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 3]
 *  2.1.0版本新增，v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用。类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。
 *  对于**v-if、v-else-if、v-else 语法** 小编写了一个类似于筛子的例子代码如下：

<body>
    		<div class="demo" v-cloak>
    			<p v-if="numder == 1">壹</p>
    			<p v-else-if="numder == 2">贰</p>
    			<p v-else-if="numder == 3">叁</p>
    			<p v-else-if="numder == 4">肆</p>
    			<p v-else-if="numder == 5">伍</p>
    			<p v-else-if="numder == 6">陆</p>
    			<p v-else>筛子坏了</p>
    		</div>
    	</body>
    	<script type="text/javascript">
    		//注意：v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
    		var demo = new Vue({
    			el:'.demo',
    			data:{
    				numder:5
    			},
    			/* 方法 */
    			methods:{
    				
    			},
    			/* 计算属性 */
    			computed:{
    				
    			}
    		})
    	</script>

## 条件渲染指令-key属性 ##

*  Vue在渲染元素时，出于效率考虑，会尽可能复用已有的元素而非重新渲染，如图所示，键入内容后，点击切换按钮，虽然DOM变了，但是在输入框键入的内容并没有改变，说明元素被复用了。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 4]
 *  如果不希望元素复用，可以使用Vue.js提供的key键属性，可以决定是否复用元素
 *  注意：key的值必须是唯一的。如下所示：  
    ![在这里插入图片描述][20191014201635475.png]
 *  给两个input元素添加key键属性后，便不会再复用了，切换类型时键入的内容也会被删除。

# 列表渲染指令v-for #

*  **简介：**
    
     *  v-for用于将一个数组对应为一组元素，至此只需操作数组，便可以自动将元素变化映射到真实的DOM节点上。
 *  **场景：**
    
     *  数据的迭代渲染：后台传过来一串关于热销书的数组 需要通过vue遍历到页面上，此时便需要用到列表渲染指令v-for。

data: {
    				/* 数组形式 */
    				books: [{
    						name: '西游记'
    					},
    					{
    						name: '红楼梦'
    					},
    					{
    						name: '水浒传'
    					},
    					{
    						name: '三国演义'
    					},
    					{
    						name: '七龙珠'
    					}
    				]
    			},

*  当需要遍历数组或者枚举对象循环显示时，需要用到列表渲染指令v-for。表达式需要结合in使用，类似item in items的形式

<body>
    
    		<div class="demo" v-cloak>
    			
    			<ul v-for="(book,index) of books" :key="book.name">
    				
    				<li @click="changeBack">{
       {index}}---{
       {book.name}}</li>
    			</ul>
    			<button @click="add">点击</button>
    		</div>
    	</body>
    	<script type="text/javascript">
    		var demo = new Vue({
    			el: '.demo',
    			data: {
    				/* 数组形式 */
    				books: [{
    						name: '西游记'
    					},
    					{
    						name: '红楼梦'
    					},
    					{
    						name: '水浒传'
    					},
    					{
    						name: '三国演义'
    					},
    					{
    						name: '七龙珠'
    					}
    				]
    			},
    			methods: {
    				add() {
    					/* var new_obj = {name:'新书'};
    					this.books.unshift(new_obj) */
    					var length = this.books.length;
    					console.log(length);
    					var idval = length + 1;
    					var new_obj = {
    						name: '新书' + idval
    					};
    					this.books.unshift(new_obj)
    				},
    				/* event.target专业术语：事件源 */
    				changeBack(event) {
    					console.log(event.target.style.backgroundColor = 'red')
    
    
    
    				}
    			},
    			computed: {
    
    			}
    		})
    	</script>

v-for 指令需要使用 item in items 形式的特殊语法，items 是**源数据数组**并且 item 是数组元素**迭代的别名**。  
表达式中，books为数据，book为当前数组元素别名。

**列表渲染也支持用of来代替in作为分隔符，更接近JS迭代器语法。**  
![在这里插入图片描述][20191014202452532.png]

*  **可选参数：索引**
 *  除了上述语法外，v-for表达式还支持可选参数“索引”，例如：  
    ![在这里插入图片描述][20191014202525474.png]
    
     *  分隔符in/of前的语句使用括号，第二个可选参数即为索引。

## 对象遍历 ##

*  除了数组外，对象的属性也是可以遍历的  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 5]
 *  **对象遍历**
 *  第二个可选参数： property 名称 (即对象的键名)：  
    ![在这里插入图片描述][20191014202739221.png]
 *  第三个可选参数：index索引  
    ![在这里插入图片描述][20191014202805954.png]

## 整数遍历 ##

*  **此外v-for还可以迭代整数**

<div class="demo" v-cloak>
    	<ul v-for="(x of num">
    				
    				<li>{
       {x}}</li>
    	</ul>
    </div>
    <script type="text/javascript">
    		var demo = new Vue({
    			el: '.demo',
    			data: {
    				num: 20
    			},

**v-for与v-if可以结合使用**

*  当它们处于同一节点，v-for 的优先级比 v-if 更高，这时v-if 将分别重复运行于每个 v-for  
    循环中。当你想为仅有的一些项渲染节点时，这种优先级的机制十分有用，如下：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 6]

# v-for+v-if #

**除了同级，二者也可以嵌套使用**  
![在这里插入图片描述][20191014203243896.png]  
**v-for控制循环次数**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 7]

## 在Vue中v-for控制循环次数的方法可以通过以下两种方法 ##

**2.通过v-if来控制**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 8]

*  注意事项：不推荐v-for与v-if同级使用。当它们处于同一节点，**v-for 的优先级比 v-if 高**，这时v-if 将分别重复运行于每个  
    v-for 循环中。
    
     *  案例：  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 9]
 *  由此推理出，哪怕只渲染出一小部分用户的元素，也得在每次重渲染的时候遍历整个列表，不论活跃用户是否发生了变化，这样的**写法多少会影响性能**。所以，可以把上面的改为计算属性：
 *  即先在计算属性里筛选过滤，再进行循环输出  
    ![在这里插入图片描述][20191014203954538.png]

# 列表渲染指令v-for之key #

*  状态维护key属性，接下来介绍下Vue中v-for循环key属性注意事项。 当Vue用 v-for
    
     *  正在更新已渲染过的元素列表是，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue将不是移动DOM元素来匹配数据项的改变，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。
     *  为了给Vue一个提示，以便它能**跟踪每个节点的身份**，从而重用和重新排序现有元素，你需要为每项提供一个**唯一 key 属**性。key属性的类型只能为 string或者number类型。
     *  此时会发现一些问题，如果绑定了key属性，则不会出现这种情况。
     *  通俗理解：加了key(一定要具有唯一性) 后，元素和事件进行了内部关联，这才是我们想达到的效果  
        接下来看个简单的例子：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>key</title>
    		<script src="../js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
    		<style type="text/css">
    
    		</style>
    	</head>
    	<body>
    
    		<div class="demo" v-cloak>
    			
    			<ul v-for="(book,index) of books" :key="book.name">
    				
    				<li @click="changeBack">{
       {index}}---{
       {book.name}}</li>
    			</ul>
    			<button @click="add">点击</button>
    		</div>
    	</body>
    	<script type="text/javascript">
    		var demo = new Vue({
    			el: '.demo',
    			data: {
    				/* 数组形式 */
    				books: [{
    						name: '西游记'
    					},
    					{
    						name: '红楼梦'
    					},
    					{
    						name: '水浒传'
    					},
    					{
    						name: '三国演义'
    					},
    					{
    						name: '七龙珠'
    					}
    				]
    			},
    			methods: {
    				add() {
    					/* var new_obj = {name:'新书'};
    					this.books.unshift(new_obj) */
    					var length = this.books.length;
    					console.log(length);
    					var idval = length + 1;
    					var new_obj = {
    						name: '新书' + idval
    					};
    					this.books.unshift(new_obj)
    				},
    				/* event.target专业术语：事件源 */
    				changeBack(event) {
    					console.log(event.target.style.backgroundColor = 'red')
    				}
    			},
    			computed: {
    
    			}
    		})
    	</script>
    </html>

# key属性由来与虚拟DOM #

## key属性标识由来： ##

*  1、当数据发生变化时，vue是怎么更新节点的？
    
     *  要知道渲染真实DOM的开销是很大的，比如有时候我们修改了某个数据，如果直接渲染到真实dom上会引起整个dom树的重绘和重排，有没有可能我们只更新我们修改的那一小块dom而不要更新整个dom呢？
     *  方案：**diff微分算**法能够帮助我们。

## key属性原理diff算法步骤： ##

*  **1、先根据真实DOM生成一颗virtual DOM**
 *  **2、当virtual DOM某个节点的数据改变后会生成一个新的Vnode**
 *  **3、然后Vnode和oldVnode作对比，发现有不一样的地方就直接修改在真实的DOM上，然后使oldVnode的值为Vnode。**

## key属性标识原理： ##

*  vue和react的虚拟DOM的Diff算法大致相同，其核心是基于两个简单的假设
 *  先看一下diff算法的处理方法，对操作前后的dom树同一层的节点进行对比，**一层一层**对比，如下图：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 10]  
    **Diff算法有三大策略之Tree Diff**
 *  Tree Diff 是对树每一层进行遍历，找出不同，如下图所示  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 11]
 *  Component Diff 是数据层面的差异比较
 *  1、如果都是同一类型的组件(即：两节点是同一个组件类的两个不同实例，比如：
    
    与
    
    )，按照原策略继续比较Virtual DOM树即可
 *  2、如果出现不是同一类型的组件，则将该组件判断为dirty component，从而替换整个组件下的所有子节点
 *  Element Diff真实DOM渲染，结构差异的比较
    
     *  当节点处于同一层级时，Diff提供三种DOM操作：删除、移动、插入。  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 12]

## key属性标识原理： ##

*  当某一层有很多相同的节点时，也就是列表节点时，Diff算法的更新过程默认情况下也是遵循以上原则。比如一下这个情况：  
    希望可以在B和C之间加一个F，Diff算法默认执行起来是这样的。如下图：  
    ![在这里插入图片描述][20191014205025708.png]
 *  即把C更新成F，D更新成C，E更新成D，最后再插入E，是不是很没有效率？  
    所以需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。如下图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 13]

*  vue中列表循环需加:key=“唯一标识”  
    唯一标识可以是item里面id、name等，因为vue组件高度复用增加Key可以标识组件的唯一性，为了更好地区别各个组件  
    key的作用主要是为了高效的更新虚拟DOM。如下图：  
    ![在这里插入图片描述][20191014205346486.png]

## key属性标识原理diff算法作用小结： ##

*  1、diff算法的作用是用来计算出 Virtual DOM 中被改变的部分，然后针对该部分进行原生DOM操作，而不用重新渲染整个页面。
 *  2、在采取diff算法比较新旧节点的时候，比较只会在同层级进行, 不会跨层级比较

## 列表渲染指令v-for之key ##

**key属性标识小结：**

*  ①简单理解：给 了Vue元素 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素。
 *  ②建议尽可能在使用 v-for 时提供 key attribute，除非遍历输出的 DOM 内容非常简单。
 *  ③key是 Vue 识别节点的一个通用机制，建议理想的key值是每项中都有的且唯一的id，不推荐使用index索引作为key。
 *  ④重要性：如果每一个虚拟DOM节点没有一个key值，他就没有自己的一个名字。当我们在做新旧虚拟dom的比对时，旧状态的虚拟节点就与难以与新状态的虚拟节点之间确立关系。当每一个虚拟节点都有唯一key值时，新旧状态的虚拟节点很快就能知道谁是谁，这样就极大提升了diff算法的效率。  
    ![在这里插入图片描述][20191014205520324.png]  
    内容有点多，如有问题，留言小编，嘿嘿…

[20191014194536518.png]: /images/20230601/ad6952d4b36046cb854670427b3a71af.png
[20191014194637854.png]: /images/20230601/0dbe746d8fc847a8a40834043ff01b10.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70]: /images/20230601/165cf422841247aa809cca189d66f375.png
[20191014195243553.png]: /images/20230601/5b6aa1b77f5149bbac7eff2ef0f86389.png
[20191014195406361.png]: /images/20230601/7a35118bacb34884a556b33fddf71c85.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 1]: /images/20230601/ed949aa769334c71967c9d63bbfeb292.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 2]: /images/20230601/0f542a92c23246b88d1d48f3feeb5ed2.png
[20191014200810212.png]: /images/20230601/f0ae9bace92f48719ecb029b33ba846b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 3]: /images/20230601/8dbaf150e83b4588b2d9aa7cfea4e0e4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 4]: /images/20230601/f553b69de4924465b3f2af3bf1f473be.png
[20191014201635475.png]: /images/20230601/fc34509b7bee4383a1dd4909fe285069.png
[20191014202452532.png]: /images/20230601/7ceda9845c2948478a465da493f3f3a6.png
[20191014202525474.png]: /images/20230601/e416341b1df343708fed0b80ac61122d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 5]: /images/20230601/ef4c2d5afd344576913c3d1e800bd609.png
[20191014202739221.png]: /images/20230601/3959c043273f4496b0862e11fad4622e.png
[20191014202805954.png]: /images/20230601/6c90ea8cfe734eb1aa106689157543b1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 6]: /images/20230601/e34083f5ada9480a91b129a51309fe72.png
[20191014203243896.png]: /images/20230601/b74d6257b13042e2b803cecc576cc07d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 7]: /images/20230601/fdd67183469d4cb190883de6d504feae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 8]: /images/20230601/6be3449b0de64e5790d7878255a46658.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 9]: /images/20230601/c80a48a8a6ce49e5b5da31e48e499321.png
[20191014203954538.png]: /images/20230601/5bb5049d31f4459c9602a547adfb489f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 10]: /images/20230601/505149808b4f429faf7983aad404b420.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 11]: /images/20230601/caf975493b174a0182c7b15b923bb241.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 12]: /images/20230601/b1c5fa81ec5648638aac7035a58a8de6.png
[20191014205025708.png]: /images/20230601/c39b93d3244449e69bc3b8745f605688.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 13]: /images/20230601/7d453379ef5646daa9de1d0589f1a85d.png
[20191014205346486.png]: /images/20230601/1decfb951b494dcab7010910a9082697.png
[20191014205520324.png]: /images/20230601/6eaa792dfb67417f9b46611fc2c3c8aa.png