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

最新推荐文章于 2025-12-05 08:37:05 发布

原创最新推荐文章于 2025-12-05 08:37:05 发布 · 105 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #javascript

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

数据绑定

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

一，语法：{{}} ---》》》》 指的是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>>;
....