Vue3中的模板语法和vue指令_vue.js_

1 模板插值语法

• 在script 声明一个变量可以直接在template 使用用法为{{变量名称}}
• 模板语法是可以编写条件运算的
• 运算也是支持的
• 操作API 也是支持的

2 指令

• v- 开头都是vue 的指令
• v-text 用来显示文本
• v-html 用来展示富文本
• v-if 用来控制元素的显示隐藏（切换真假DOM）
• v-else-if 表示 v-if 的“else if 块”。可以链式调用
• v-else v-if条件收尾语句
• v-show 用来控制元素的显示隐藏（display none block Css切换）
• v-on 简写@ 用来给元素添加事件
• v-bind 简写: 用来绑定元素的属性Attr
• v-model 双向绑定
• v-for 用来遍历元素

v-on修饰符

冒泡案例：

阻止表单提交案例：

v-bind 绑定class 案例 1：

v-bind 绑定class 案例 2：

 // 直接绑定cls 

v-bind 绑定style案例：

v-model 案例：

到此这篇关于Vue3中的模板语法和vue指令的文章就介绍到这了,更多相关vue3模板语法和vue指令内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！