视频讲解vue2基础之渲染v-if/v-show/v-for/v-html

 大家好，我是你们的老朋友lqj_本人，最近一周没有更新文章了，是因为最近学校有一些活动比赛，也有一部分原因就是我在录制一些关于前端方面的视频，涉及到的领域主要一前端，比如：H5开发，App开发，小程序开发。前期主要以前端开发为主比如，后期的话会陆续更新关于通过云开发来简化后端从而完成更加快捷全栈开发内容！

csdn：lqj_本人

哔哩哔哩：小淼前端

视频详细讲解可搜索：uni-app框架与vue2从基础到项目实践_哔哩哔哩_bilibili 

大家觉得弟弟的视频对您们有帮助的话，可以三连给个支持！

您们的支持是我坚持的最大动力！

最后，祝每一个代码海洋中杨帆的人，能过有一个美好的彼岸！！！

目录

普通渲染 

插值语法的使用

 数组中的渲染

 对象中的渲染

条件渲染

v-if/v-else/v-else-if

v-show

v-for

v-html

---

普通渲染 

插值语法的使用

内容将会被替代为对应数据对象上msg的值。无论何时，绑定的数据对象上msg发生了改变，插值处的内容都会更新

代码实现

//条件渲染v-if与v-show与v-for
<template>
	<view>
		<view>{{title}}</view>
		<view>{{num}}</view>
		<view>{{arr}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:"与淼淼一起学习uni-app",
				num:123,
				arr:["aaa","bbb","ccc"],
			}
		},
		onLoad() {

		},
		methods: {
	}
</script>

<style>
	
</style>

 

 视频详细讲解可搜索：uni-app框架与vue2从基础到项目实践_哔哩哔哩_bilibili 

 数组中的渲染

如果像渲染数组里面的某一个值的话，我们可以在渲染的时候给他一个下标值来判断他的索引值：

 

//条件渲染v-if与v-show与v-for
<template>
	<view>
		<view>{{arr[0]}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				arr:["aaa","bbb","ccc"],
			}
		},
		onLoad() {

		},
		methods: {
	}
</script>

<style>
	
</style>

 视频详细讲解可搜索：uni-app框架与vue2从基础到项目实践_哔哩哔哩_bilibili 

 对象中的渲染

要想把一个对象中的值渲染出来，必须先找到他的对象，然后在总对象下面再找到数据所属的参数。

//条件渲染v-if与v-show与v-for
<template>
	<view>
        <view>姓名：{{obj.name}}  年龄：{{obj.age}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				obj:{name:"张三",age:20},
			}
		},
		onLoad() {

		},
		methods: {
	}
</script>

<style>
	
</style>

 

 视频详细讲解可搜索：uni-app框架与vue2从基础到项目实践_哔哩哔哩_bilibili 

 

条件渲染

v-if/v-else/v-else-if

作用：指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。

//条件渲染v-if与v-show与v-for
<template>
	<view>
		<view v-if="day==3">周三</view>
		<view v-else-if="day==4">周四</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				day:4,
			}
		},
		onLoad() {

		},
		methods: {
	}
</script>

<style>
	
</style>

return返回值里面是day:4，如果标签李米娜判断正确时就按照上面的渲染条件进行判断渲染！

 视频详细讲解可搜索：uni-app框架与vue2从基础到项目实践_哔哩哔哩_bilibili 

 v-show

v-show 是一个根据条件展示元素选项的指令 。用法大致和 v-if 一样

//条件渲染v-if与v-show与v-for
<template>
	<view>
		<view v-show="panduan">与淼淼一起学习uniapp及vue2</view>
		<view v-show="!panduan">与淼淼一起学习uniapp及vue2</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				panduan:true,
			}
		},
		onLoad() {

		},
		methods: {
	}
</script>

<style>
	
</style>

 视频详细讲解可搜索：uni-app框架与vue2从基础到项目实践_哔哩哔哩_bilibili 

 v-for

可以将组数以及对象中的内容循环的渲染出来

//条件渲染v-if与v-show与v-for
<template>
	<view>
		<view v-for="item in goods":key="item.id">
			<view>商品名称：{{item.title}}---价格：￥{{item.price}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goods:[
					{
						id:1,
						title:"李宁-绝影",
						price:888
					},
					{
						id:2,
						title:"耐克-飞马",
						price:1350
					}
				]
			}
		},
		onLoad() {

		},
		methods: {
	}
</script>

<style>
	
</style>

 也可以具体点击按钮时，进行一些列的操作变化！

视频详细讲解可搜索：uni-app框架与vue2从基础到项目实践_哔哩哔哩_bilibili

v-html

更新元素的 innerHTML 。

注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。
 

//条件渲染v-if与v-show与v-for
<template>
	<view>
		<view v-html="title"></view>
		<view v-html="code"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				code:"<h1>与淼淼一起学习</h1><em>uni-app及vue2</em>",
				title:"与淼淼一起学习uni-app",
			}
		},
		onLoad() {

		},
		methods: {
	}
</script>

<style>
	
</style>

注意：code:"<h1>与淼淼一起学习</h1><em>uni-app及vue2</em>"

v-html可以将在后台把前台的标签写出来，在从前台渲染实现动态的标签的渲染效果！

 视频详细讲解可搜索：uni-app框架与vue2从基础到项目实践_哔哩哔哩_bilibili