小白学习Vue（5）

最新推荐文章于 2024-07-30 17:10:23 发布

不是，你来真的啊？

最新推荐文章于 2024-07-30 17:10:23 发布

阅读量90

点赞数

分类专栏：前端 Vue 文章标签：自学

本文链接：https://blog.csdn.net/weixin_43724848/article/details/104176872

版权

前端同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

Vue

10 篇文章 0 订阅

订阅专栏

一.介绍

特别不幸的事，就是今天的肺炎人数上升至2w+了，我只是希望这个疫情能够快点好，中国加油！武汉加油！

2020.2.4

其实今天并没有太多的学习Vue，而是较多的去看了一下关于数据结构的一些视频，因为我觉得这一块不仅对于我考研比较重要，在计算机的学习中应该都非常重要，但是我对于这一块的内容，我好像已经忘记的差不多了，所以想着反正这几天呆在家里也没啥事做，不如再看看数据结构，把知识巩固一下，看的细致一点。

二.代码

第一块代码是cpp实现的链表操作。我巩固了一下，是关于创建链表等一系列操作，以及找到链表中间元素的完整代码。

///写一个完整的程序，
///实现随机生成20个元素的链表（头插法）
///用我们刚才学到的方法快速查找中间节点的值并进行显示
#include<bits/stdc++.h>
using namespace std;
typedef struct node
{
	int data;
	struct node *next;
}node;
typedef struct node *linklist;


bool visit(int c){
	cout<<c<<' ';
	return true;
}

bool linklistinit(linklist *list){
	*list = (linklist)malloc(sizeof(node));
	if(!(*list)){
		return false;
	}
	(*list)->next = NULL;
	return true;
}

void linklistcreate(linklist *list,int n){
	linklist p;
	int i;
	srand(time(0));
	*list = (linklist)malloc(sizeof(node));
	(*list)->next = NULL;
	for(i = 0;i<n;i++)
	{
		p = (linklist)malloc(sizeof(node));
		p->data = rand()%100+1;
		p->next = (*list)->next;
		(*list)->next = p;
	}
}

int linklistlength(linklist list)
{
	int i = 0;
	linklist p = list->next;
	while(p)
	{
		i++;
		p = p->next;
	}
	return i;
}

bool coutnumber(linklist list)
{
	linklist p = list->next;//放在头节点
	while(p)
	{
		visit(p->data);
		p = p->next;
	}
}

bool getmidnumber(linklist list,int *e)
{
	linklist p,q;
	p = list->next;
	q = list->next;
	while(p->next!=NULL){
		if(p->next->next!=NULL)
		{
			p = p->next->next;
			q = q->next;
		}
		else
		{
			p = p->next;
		}
	}
	*e = q->data;
	return true;
}

int main ()
{
	linklist list;
	int i;
	int e;
	i = linklistinit(&list);
	cout<<"the length is:"<<linklistlength(list)<<endl;
	linklistcreate(&list,20);
	coutnumber(list);
	cout<<endl;
	cout<<"the length excately is:"<<linklistlength(list)<<endl;

	getmidnumber(list,&e);
	int midman = e;
	cout<<"这就是中间元素："<<e<<endl;

	//cout<<"hgehehehe"<<endl;

	return 0;




}

2.现在是关于Vue的，因为今天考虑数据结构的问题比较多，所以Vue学的比较少

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>w1w1</title>
		<script src="./lib/vue.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		
		<div id="app">
			
			<input type="button" value="toggle" @click="toggle" />
			<!-- <input type="button" value="toggle" @click="flag = !flag " /> -->
			
			<!-- v-if的特点，每次都会重新删除或创建元素 -->
			<!-- v-show的特点：每次不会重新进行DOM的删除和创建操作，只是切换了元素的display：none -->
			
			<!-- v-if有较高的切换性能消耗 -->
			<!-- v-show有较高的初始渲染消耗 -->
			
			<!-- 如果元素涉及到频繁的切换最好不要使用v-if，推荐使用v-show -->
			<!-- 如果元素可能永远也不会被显示出来给用户看见，则推荐使用v-if -->
			<h3 v-if="flag">这是v-if</h3>
			<h3 v-show="flag">这是v-show</h3>
		</div>
		<script>

			var vm  =new Vue({
				el:'#app',
				data:{
					flag:true,
					
				},
				methods:{
					toggle(){
						this.flag = !this.flag;
					}
				}
			})
		</script>
	</body>
</html>

三.代码分析

关于cpp的我就不多说了，因为主要是数据结构这些比较基础的东西，我也只是进行一下复习而已，方法学会自然就比较好懂
Vue的是v-if和v-show，其实他们的实现的都是view层的切换问题，但是这里面并不是完全的一样，对于v-show来说，它只是对样式进行了一个改变（display：none），每次不会进行删除和创建操作。
于是乎，如果样式频繁的切换，那么就不要轻易的使用v-if，多多的使用v-show；如果样式只是必需，但是不必要显示，那么v-if就显得更好一些了。

不是，你来真的啊？

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
小白学习Vue（5）

一.介绍特别不幸的事，就是今天的肺炎人数上升至2w+了，我只是希望这个疫情能够快点好，中国加油！武汉加油！2020.2.4其实今天并没有太多的学习Vue，而是较多的去看了一下关于数据结构的一些视频，因为我觉得这一块不仅对于我考研比较重要，在计算机的学习中应该都非常重要，但是我对于这一块的内容，我好像已经忘记的差不多了，所以想着反正这几天呆在家里也没啥事做，不如再看看数据结构，把知识巩固...
复制链接

扫一扫

专栏目录