1.vue.js权威指南系统学习---数据绑定

本文详细介绍了数据绑定的概念及其在前端开发中的应用。通过Mustache语法实现数据与视图的同步更新,支持变量显示、表达式计算及过滤器功能。此外,还探讨了如何自定义数据绑定的分隔符。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

数据绑定

含义:数据绑定指的是将数据和视图进行相关联,当数据发生变化时,视图也进行相对应的变化。

一,语法:{{}} ---》》》》 指的是Mustache语法。

1.可以在语法中显示变量 比如
<span>{{name}}</span>

2.可以在语法中显示表达式 比如
{{number / 100}}		在原有的值上面除以100
{{true?1:0}}	// 三元表达式,值为true,则输出1,false则输出0;

3.可以在语法中使用过滤器。(过滤器的本质是js中的函数),比如
{{example | toUpperCase}} 	--->> 将值输出为大写字母;

二.分隔符 --》》 可自定义语法
// 源码
let delimiters = [ '{{', '}}']
let unsafeDelimiters = ['{{{',  '}}}']			-- > HTML插值的分隔符

// 修改
Vue.config.delimiters = ['<<', '>>']    ----------->> 语法变成了 <<Name>>;
....
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值