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

相关内容

热门资讯

第32届世界大运会中国代表团成... 第32届世界大学生夏季运动会中国大学生体育代表团出征仪式8日在京召开,代表团将派出约120名运动员赴...
中兴通讯:回应光模块布局,基于... 投资者提问:从2024年下半年开始,全球光模块需求旺盛,上市公司中中际旭创,新易盛等都收获颇丰,但作...
龙虎榜丨中油资本涨停,深股通净... 中油资本(000617.SZ)今日涨停,换手率4.39%,成交额46.3亿元。龙虎榜数据显示,深股通...
天津人社局原副巡视员刘维新被查 转自:上观新闻据天津市纪委监委消息:天津市人力资源和社会保障局原副巡视员刘维新涉嫌严重违纪违法,目前...
后厨视频公布!天水市长:深感痛... 近日,甘肃天水市麦积区培心幼儿园发生部分幼儿血铅异常事件。7月8日上午,甘肃省天水市联合调查组公布了...
太阳能2025年上半年发电量达... 7月8日,太阳能(000591)发布公告,2025年上半年度公司装机容量及发电量完成情况如下:截至2...
凌云股份控股股东凌云集团增持股... 凌云股份(600480)发布公告,控股股东北方凌云工业集团有限公司截至2025年7月8日通过集中竞价...
大疆首款360度全景运动相机 ...   炒股就看金麒麟分析师研报,权威,专业,及时,全面,助您挖掘潜力主题机会! IT之家 7 月 8...
精工钢构(600496.SH)... 格隆汇7月8日丨精工钢构(600496.SH)公布,2025年1-6月,公司(包括控股子公司)共新签...
贵阳又一批老旧小区将迎改造! 贵阳近期拆改新动态来了涉及以下这些老旧小区、城中村 有没有你家附近的,一起来看看01文昌阁片区历史文...