前端框架Vue模板语法
sz199511 · 502浏览 · 发布于2021-01-06
一、插值表达式
插值表达式是vue框架提供的一中在HTML模板中绑定数据的方式,使用“{{变量名}}”方式进行绑定Vue实例中data的数据变量,会将绑定的数据实时的在视图(HTML)中显示出来。
插值表达式支持使用变量名称和部分js表达式以及三元表示式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 在这个标签中中编写Vue的视图 --> <div id="app"> <!-- 1直接进行使用 --> <p> {{str}} </p> <!-- 2字符拼接进行输出 --> <p> {{str + '拼接文本'}} </p> <!-- 3进行数学运算 --> <p> {{num +10}} </p> <!-- 4三元表达式 --> <p> {{age > 18 ? '成年人' : '未成年' }} </p> <!-- 5 使用方法,将字符串进行剪切 --> <p> {{str.substr(1,5)}} </p> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> // !创建Vue实例 new Vue({ // 通过el绑定元素 el: '#app', // 所有的数据都放在data中 data: { // 定义一个数据 str:"Vue里面data里面的数据", num:10, age:13, str:'0123456789' }, }) </script> </html>
二、指令
什么是指令?
在Vue中,指令就是视图中标签的属性,是以“v-”开头的属性,在使用指令之前需啊哟先定义指令。在vue中有内置的指令,也可以进行自定义指令
指定的作用是什么?
指定是用来处理数据的,具体是什么操作,需要看这个指令具有什么作用,例如:v-on是用来绑定事件
相关推荐
RN开发环境的npm私库本地debug调试
manongba · 698浏览 · 2019-05-09 17:03:46
你不知道的浏览器渲染原理
追忆似水年华 · 1373浏览 · 2019-05-09 22:47:56
基于iview的router常用控制方式
追忆似水年华 · 999浏览 · 2019-06-03 10:39:21
编程小知识之 JavaScript 文件读取
manongba · 717浏览 · 2019-06-10 09:16:16
浏览器关闭后,Session会话结束了么?
追忆似水年华 · 907浏览 · 2019-06-13 09:39:50
分类专栏
最新发布
最热排行
0评论