计算属性

计算属性

实现倒叙：

<h1>{{name.split('').reverse().join('')}}</h1> <h1>{{reverse()}}</h1> <h1>{{name | res(1, 2, 3, 4)}}</h1> <h2>{{name2}}</h2> 

{{name.split('').reverse().join('')}}

methods: {
        reverse(){
            return this.name.split('').reverse().join(''); } }, 

filters: {
        res(val,n1,n2,n3,n4){
            return val.split('').reverse().join(''); } } 

只要name不发生变化，本函数就永远不会执行； DOM模板中使用的一直都是name2的缓存值 name2彻底依赖于name

computed: {
        //计算属性 name2(){ //简写方式 return this.name.split('').reverse().join(''); } } 

只要函数用某些变量，那么计算属性就用这些变量

name5: {
        //全写的内容：有一个get函数和set函数 //简写只至关于一个get函数 //这两个函数，能够只写一个get,但不能只写一个set get(){ console.log('get'); return this.name;//get的return值就是name5的值 }, set(val){ console.log(val,'set');//val就是设置给name5的内容 } } 

有一个缺点

computed:{
        name2(){
            //不支持异步;卸载异步函数中的变量 跟 name2 不存在依赖关系 setTimeout(()=>{ this.str = this.name + 'computed'; },0) console.log(this.name); } } 

watch

• 性能没有computed高
• 可以使用异步

v-if

决定该标签是否要加载 会引起重绘

<h1 v-if="isShow == 1">显示标签</h1> <h2 v-else-if="isShow == 2">标签2</h2> <h2 v-else>v-else</h2> 

显示哪一个标签看isShow属性的值 v-if v-else v-else-if 用的时候须要紧挨着，中间不能掺杂不相干的元素

v-show

决定元素是否隐藏 只能引起回流

<h3 v-show="0">v___show</h3> 

至关于

<h3 style="display: none;">v___show</h3>