Vue模板语法与核心指令详解-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46703930/article/details/107997959

这篇博客详细介绍了Vue的模板语法，包括文本、HTML、属性插值和表达式。接着深入讲解了Vue的核心指令，如v-if、v-else、v-else-if、v-show和v-for的用法，帮助读者理解如何在实际开发中运用这些指令进行条件渲染和遍历操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一. 模板语法

1、插值
1.1文本

					<p>
						1.1 文本 title={{title}},ts={{ts}}
					</p>

var vm=new Vue({
			el:'#app',
			data:function(){
				return{
					title:'hello Vue',
					ts:new Date().getTime(),
				}
			},

1.2html

<li>1.2 html</li>
				<div v-html="html"></div>

html:'<input type="text" value=0>',

1.3属性

<li>1.3 属性</li>
				<div>
					<a href="https://www.baidu.com">百度</a>
					<a v-bind:href="href">新浪</a>
					<input type="button" value="滴滴" v-on:click="onClick"/>
				</div>

html:'<input type="text" value=0>',
					href:'http://www.sina.com',
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200814095302134.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjcwMzkzMA==,size_16,color_FFFFFF,t_70#pic_center)

1.4表达式

<li>1.4 表达式</li>
				{{str.substr(0,6).toUpperCase()}}
				{{ number + 1 }}
				{{ ok ? 'YES' : 'NO' }}
				<li v-bind:id="'list-' + id">我的Id是js动态生成的</li>

str:'hello vue',
					number:10,
					ok:false,
					id:12

以上语法所显示的效果
在这里插入图片描述

二、指令

释义：指的是带有“v-”前缀的特殊属性
1、核心指令
1.1、v-if

<div v-if="sex=='boy'">
					yyy
				</div>

1.2、v-else

<div v-else>
					iii
				</div>

1.3、v-else-if

<div v-else-if="sex=='girl'">
					xxx
				</div>

1.4、v-show

<input type="checkbox" v-model="show" />隐藏或显示
				<div v-show="show">
					xxyy
				</div>

show:false,

1.5、v-for

<li>v-for</li>
				<div v-for="st in students">
					{{st.name}}
				</div>

students:[
						{'id':'1','name':'zs','score':95},
						{'id':'2','name':'ls','score':20},
						{'id':'3','name':'ww','score':72},
						{'id':'4','name':'zl','score':100}
					]

三、监听属性

<li>监听属性</li>
				KB:<input type="text" name="kb" v-model="kb"/><br />
				MB:<input type="text" name="mb" v-model="mb"/>

watch:{
				kb:function(v){
					this.mb=v/1024;
				},
				mb:function(v){
					this.kb=v*1024;
				}
			}

以上代码所展示效果：
在这里插入图片描述

Vue语法

一. 模板语法

二、指令