计算属性和监听器

看文档：https://v3.cn.vuejs.org/guide/computed.html#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%E7%9A%84-setter

 

基本例子

计算属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!-- v3.0 -->
        <script src="js/vue.min.js"></script>
    </head>
    <body>
        <div id="computed-basics">
            <p>Has published books:</p>
            <span>{{publishedBooksMessage}}</span>
        </div>
        
        <script type="text/javascript">
            Vue.createApp({
                data(){
                    return {
                        author: {
                            name:'John Doe',
                            books:[
                                'Vue 2 - Advanced Guide',
                                'Vue3 - Basic Guide',
                                'Vue4 -The Mystery'
                            ]
                        }
                    }
                },
                computed:{
                    publishedBooksMessage(){
                        return this.author.books.length>0 ? 'yes':'No'
                    }
                }
            }).mount('#computed-basics')
        </script>
    </body>
</html>

 

监听器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!-- v3.0 -->
        <script src="js/vue.min.js"></script>
        <!-- <script src="https://unpkg.com/vue@next"></script> -->
        <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
    </head>
    <body>
        
        <div id="watch-example">
            <p>
                Ask a yes/no question:
                <input type="text" v-model="question">
            </p>
            <p>{{answer}}</p>
        </div>
        
        <script type="text/javascript">
            const watchExampleVM = Vue.createApp({
                data(){
                    return {
                        question:'',
                        answer:'Questions usually contain a question mark. ;-)'
                    }
                },
                watch:{
                    question(newQuestion,oldQuestion){
                        if(newQuestion.indexOf('?')>-1){
                            this.getAnswer()
                        }
                    }
                },
                methods:{
                    getAnswer(){
                        this.answer = 'Thinking...'
                        axios
                        .get('https://yesno.wtf/api')
                        .then(response=>{
                            this.answer = response.data.answer
                        })
                        .catch(error =>{
                            this.answer = 'Error! Could not reach the API'+error
                        })
                    }
                }
            }).mount('#watch-example')
        </script>
    </body>
</html>

 

posted @ 2021-12-17 17:19  漫漫长路</>  阅读(37)  评论(0)    收藏  举报