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举个例子

相关内容

热门资讯

7月4日芯片ETF(51276... 7月4日,芯片ETF(512760)跌0.18%,成交额3.32亿元。当日份额减少4680.00万份...
7月4日A500ETF基金(5... 7月4日,A500ETF基金(512050)涨0.10%,成交额38.10亿元。当日份额减少8400...
7月4日中证A500ETF华宝... 7月4日,中证A500ETF华宝(563500)涨0.10%,成交额8666.20万元。当日份额增加...
7月4日科创芯片设计ETF(5... 7月4日,科创芯片设计ETF(588780)跌0.38%,成交额2612.93万元。当日份额减少20...
7月4日创业板50ETF国泰(... 7月4日,创业板50ETF国泰(159375)跌0.19%,成交额1019.08万元。当日份额减少1...
网传歌手赵传2010年已离婚,... 网传歌手赵传2010年已离婚,是否是谣言?这个不是谣言,而且这个歌手已经承认了,他确实是在2010年...
7月4日创50ETF工银(15... 7月4日,创50ETF工银(159370)涨0.00%,成交额2088.72万元。当日份额减少190...
7月4日上证180ETF基金(... 7月4日,上证180ETF基金(530800)涨0.19%,成交额799.84万元。当日份额增加20...
7月4日科创综指ETF南方(5... 7月4日,科创综指ETF南方(589660)跌0.31%,成交额4084.39万元。当日份额减少80...
7月4日卫星ETF(15920... 7月4日,卫星ETF(159206)跌1.47%,成交额2541.44万元。当日份额减少600.00...