美文网首页
uni-app计算属性(computed)、方法(methods

uni-app计算属性(computed)、方法(methods

作者: 糖糖_2c32 | 来源:发表于2022-02-23 16:11 被阅读0次

    例如:

    <template>
        <view>
            {{fullText}}
            <button type="primary" @click="click">change</button>
            {{name}}
        </view>
    </template>
    
    <script>
        export default {
            data() {
                return {
                    firstText: 'hello',
                    lastText: 'world',
                    fullText:'hello world',
                    name: 'qq'
                }
            },
            methods: {
                click() {
                    this.firstText = 'tt'
                },
                // fullText() {
                //  console.log('方法')
                //  return this.firstText + ' ' + this.lastText;
                // }
            },
            watch:{
                firstText() {
                    console.log('监听')
                    this.fullText = this.firstText + ' ' + this.lastText;
                },
                lastText() {
                    console.log('监听')
                    this.fullText = this.firstText + ' ' + this.lastText;
                }
            }
            // computed:{
            //  fullText(){
            //      console.log('计算属性')
            //      return this.firstText + ' ' + this.lastText;
            //  }
            // }
        }
    </script>
    
    <style>
    
    </style>
    
    

    1、对于计算属性来说,当计算属性中的值(firstText、lastText)发生改变的时候,则计算属性中的相关方法(fullText)将被触发
    2、对于监听来说,当变量值(firstText、lastText)发生改变的时候,监听中变量值的监听方法(firstText、lastText)将被触发
    3、对于方法来说,当页面发生重新渲染的时候,方法将被重新执行

    相关文章

      网友评论

          本文标题:uni-app计算属性(computed)、方法(methods

          本文链接:https://www.haomeiwen.com/subject/lcwolrtx.html