Vue.js基础入门系列(二)数据绑定
16lz
2021-03-18
Vue.js数据绑定
数据绑定是将数据和视图相关联,当数据发生变化时,可以自动更新试图
语法
1.1、插值
文本插值是最基本的形式,使用双大括号{{}};
双大括号的分隔符可以在vue.config文件仲修改。例如 <% %>
Mustache标签
--实时更新内容
<span>Test: {{text}}</span>
--只渲染一次数据,后续数据变化不再关心
<span>Test: {{*Test}}</span>
--数据包含html片段
<span>Logo: {{{logo}}}</span>
logo: '<span>DDFE</span>'
--双大括号标签可以放在html标签内
<li data-id='{{id}}'></li>
1.2、表达式
表达式是各种数值、变量、运算符的综合体。简单的表达式可以是常量或者变量名称。
<!--JS表达式-->
{{ cents / 100 }} //在原值的基础上除以100
{{ true ? 1 : 0 }} //值为真,则渲染出1,否则渲染为0
{{ example.split(",") }}
<!--过滤器-->
{{example | filterA | filterB }}
{{example | filter a b }} --a、b为传入参数
1.3、指令
指令是带有v-前缀的特殊特性,其值限定为绑定表达式。
指令的作用是当表达式的值发生变化时,将这个变化也反映到DOM上。
<div v-if="show">DDFE</div>
有一些特殊指令的语法不同,在指令和表达式之间插入一个参数
<a v-bind:href="url"></a>
<div v-on:click="action"></div>
更多相关文章
- DolphinDB数据导入教程
- 基于PG数据库插件的SQL规范审核工具
- 你只知大数据的便利,却不知漏洞——hadoop安全完整解析
- 大数据时代,传统数据仓库技术是否已经过时?
- 2020 年上半年互联网公司"死亡"名单!
- 降低大数据开发难度,轻量级计算实例
- RHEL7.6安装Oracle11g数据库--5、安装数据库补丁
- DMHS-达梦实时同步工具
- 618大促,苏宁如何通过citus打造分布式数据库抗住DB高负载