前端技术学习第八讲：VUE基础语法---VUE常用指令_前端vue 所有语法和命令-CSDN博客

本文链接：https://blog.csdn.net/u010611510/article/details/130329142

本文详细介绍了Vue.js中的常用指令，包括v-text用于文本内容绑定，v-html用于展示HTML代码，v-bind用于属性绑定，v-if、v-else和v-else-if实现条件判断，v-for用于数据循环，v-on用于事件监听，v-model实现双向数据绑定，以及v-show根据条件控制内容的显示和隐藏。这些指令是Vue开发中实现数据和视图交互的基础。

摘要由CSDN通过智能技术生成

VUE常用指令

在VUE学习中，通常使用相关指令使VUE对象中的内容与网页进行挂载绑定，是我们的数据与视图之间产生关联，完成渐进式动态效果。VUE指令都会以“v-”开头。

指令名	描述
v-text	将文本内容挂载到页面元素中
v-html	将html代码展示到页面元素中
v-bind	将内容解析成为js，绑定至页面元素中，可以是内容，也可以是属性
v-if	根据判断结果控制内容展示
v-else	不能单独使用，一般与v-if一起使用
v-else-if	与v-if一起使用，组成多条件结果操作
v-for	循环多组内容
v-on	将方法挂载到页面元素中，具体方法参见JavaScript方法
v-model	将数据与元素进行双向绑定
v-show	对内容进行展示，也可以通过判定控制内容展示，相当于“display” 属性

一、v-text和v-html

v-text：将文字内容绑定到页面元素中，在某种情况下与{ {}}插值表达式相似，但{ {}}灵活一些，v-text更亲和元素
v-html：将Html代码绑定到页面元素中，{ {}}插值表达式和v-text无法解析Html代码，只会原样展示，而v-html能够解析Html内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!-- {
   {context}} -->
			<p v-html="context"></p>
			<p v-text="name"></p>
			<p v-text="age"></p>
			<p v-text="sex"></p>
		</div>
		<script type="text/javascript">
			const vue=new Vue({
     
				el:'#app',
				data:{
     
					name:'张三',
					age:18,
					sex:'男',
					context:'<h1>个人信息</h1>'
				}
			})
		</script>
	</body>
</html>

在这里插入图片描述

二、v-bind

v-bind：可以将内容绑定到属性值中，将绑定的内容解析成为js，方便获取内容或属性值，v-bind可以直接简写成为“：属性”

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!-- {
   {context}} -->
			<p v-html="context"></p>
			<p v-text="name"></p>
			<p v-text="age"></p>
			<p v-text="sex"></p>
			<img v-bind:src=