当前位置:

Vue 模板语法与计算属性,方法,监听

本文最后更新于2022-01-28,已超过 1年没有更新,如果文章内容、图片或者下载资源失效,请留言反馈,我会及时处理,谢谢!

温馨提示:本文共580个字,读完预计2分钟。

一、vue模板语法

  1. 插值表达式: {{}}

  2. v-text =“name”:name就不再是字符串了,而是一个js的表达式

    就是innerHTML,显示name变量所对应的值,可以将数据变量显示在页面上,实际和插值表达式{{}}是一样的

  3. v-html = “name”: 让innerHTML和name做一个数据绑定

  4. 区别:v-text 会转义输出,不会有任何样式改变(插值表达式也是)

              v-html 不会进行转义,输出带样式效果

  5. v-指令后面的内容为js表达式,除了写js表达式还可以在后面加上字符串(整体也是一个js表达式)

    例如:<div v-html ="name + ' Lee '"></div>

    插值表达式也一样,例如:{{name + ‘ Lee ’}}

二、计算属性,方法,监听

computed: 计算属性,有缓存。如果其依赖的数据项没有发生改变就不会重新计算,否则如果其依赖的数据项发生了改变就会触发里面的方法,与其无关的数据变化不会触发计算属性。

methods:方法, 没有缓存,使用时要加上()实现方法的调用,只要数据发生变化就会触发,不管数据就没有关系。(因为是函数的调用,又没有缓存,每调用一次就重新执行一次)

watch:监听器,有缓存。功能与computed相似,但是代码复杂。

如果同一个功能,上述三个都可以实现,那么推荐computed,结构简单,性能好。

本文链接:,转发请注明来源!
评论已关闭。