03-模板语法
创始人
2024-06-04 00:15:54
0

模板语法分为两点:

  1. 插值语法
  2. 指令语法

1.插值语法

2.指令语法

2.1 v-bind



模板语法

插值语法

你好,{{name}}


指令语法

百度

v-bind可以给标签里的任何属性动态绑定值,如下代码



模板语法

插值语法

你好,{{name}}


指令语法

百度

在这里插入图片描述

会发现会报错,因为在标签里的属性里前面加上了v-bind:,它会将属性值去Vue实例里的data里找对应的属性值,没有找到则会报上面的错误,有就会限制data里对应的属性值。

修改代码如下:
在这里插入图片描述

在这里插入图片描述

2.1.1 v-bind:可以简写:

在这里插入图片描述



模板语法

插值语法

你好,{{name}}


指令语法

百度百度

可以这么写:

js表达式要记牢
js表达式要记牢

3.data里的对象调用



模板语法

{xxx}},xxx是js表达式,且可以直接读取到data中的所有属性2.指令语法:功能:用于解析标签(包括:标签属性、标签体内容、绑定时间.....)。举例:v-bind:href="xxx" 或 简写为 :href="xxx",xxx同样要写js表达式,且可以直接读取到data中的所有属性备注:Vue中有很多的指令,且形式都是:v-????,此处我们只是拿v-bind举个例子-->

插值语法

你好,{{name}}


指令语法

百度{{school.name}}

3.总结

Vue模板语法有2大类:
1.插值语法:功能:用于解析标签体内容写法:{{xxx}},xxx是js表达式,且可以直接读取到data中的所有属性
2.指令语法:功能:用于解析标签(包括:标签属性、标签体内容、绑定时间.....)。举例:v-bind:href="xxx" 或 简写为 :href="xxx",xxx同样要写js表达式,且可以直接读取到data中的所有属性备注:Vue中有很多的指令,且形式都是:v-????,此处我们只是拿v-bind举个例子

相关内容

热门资讯

新还珠格格,欣荣和永琪有个孩子... 新还珠格格,欣荣和永琪有个孩子?不是说永琪从来都没碰过她吗?绵忆到底是他和小燕子的还是欣荣的啊求正解...
中级会计怎么备考?今年几月考试... 中级会计怎么备考?今年几月考试?您好,很高兴为您解答中级会计师考试,教材是根本和基础,所有的题目都是...
继兴业、招商、中信后,邮储银行... (来源:现代商业银行杂志)金融资产投资公司(AIC)队伍再添新员。邮储银行近日发布公告称,该行拟以自...
中央巡视组对陕西开展两个半月常... 转自:北京日报客户端日前,中央第十五巡视组进驻陕西省,将开展为期两个半月左右的常规巡视,并会同陕西省...
柳州幻境空间在哪里 柳州幻境空间在哪里柳州幻境空间是位于广西柳州市城中区华联商闷郑城4楼的室内主题乐园,提供了各种游戏和...
中央巡视组进驻山东 联动巡视济... 转自:央视新闻客户端经党中央批准,二十届中央第六轮巡视将对16个省(自治区、直辖市)开展常规巡视,并...
继续发布暴雨蓝色预警!北京等地... 转自:央视新闻客户端中央气象台19日早6时继续发布暴雨蓝色预警。预计,19日早8时至20日早8时,青...
降妖伏魔篇演员有哪些 降妖伏魔篇演员有哪些文章舒淇程小东黄勃
晚上十一点在河边抓鱼听到有人叫... 晚上十一点在河边抓鱼听到有人叫我小名声音跟我一个朋友一样,电筒照却没有发现有人而且我女朋友也听见了不...
属猴的为什么吸引属狗的人 属猴的为什么吸引属狗的人属相狗虽不善甜言蜜语,为人多有情感之被捉,然其铅轮内心却多有向往甜蜜幸福之生...