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

相关内容

热门资讯

文化志愿服务“新声代”亮相!浦... 转自:上观新闻今天一早,浦东新区文化艺术指导中心迎来了百余名青少年志愿者,2025年浦东非遗体验馆青...
中建集团召开2025年基础设施...   7月4日,中建集团在京召开2025年基础设施业务工作会议,系统总结过去五年取得的成绩和经验,立足...
上海首发经济再添新案例,瑞士名... 转自:上观新闻为庆祝创立270周年,瑞士高级制表品牌江诗丹顿近日在上海张园揭幕“臻途”限时体验空间。...
年报难产 停牌两个月 A股百亿...   7月6日晚间,天茂集团(000627.SZ,股价2.74元,市值134.37亿元)公告称,公司无...
通往厦门!泉州这条重要交通干道... 转自:泉州发布近日,国道324线泉州南迎宾大道沥青路面罩面工程全线完工。南迎宾大道浦口环岛至晋江紫帽...
南京商旅:控股股东拟进行改革重... 南京商旅7月6日公告称,公司控股股东南京旅游集团拟以南京旅游集团为主体,推进南京旅游集团、南京市文化...
近期,开车带孩子出门千万留意这... 炎炎夏日,车内气温升高快,带孩子出门切勿掉以轻心。近日,消防部门接报了多起家长一时大意将孩子锁在车内...
南京商旅:控股股东南京旅游集团... 转自:证券时报人民财讯7月6日电,南京商旅(600250)7月6日晚间公告,公司收到控股股东南京旅游...
2025年工会夏令营即将开启 ... 来源:中工网 中工网记者 王鑫2025年工会夏令营将于7月7日至8月24日在京拉开帷幕。本次夏令营预...
这些车辆违停!合肥交警最新通报 为有效预防和减少道路交通事故,营造平安畅通的道路交通环境,合肥市公安局交警支队在全市范围内持续开展机...