Vue中的v-bind和动态API调用示例-CSDN博客

本文链接：https://blog.csdn.net/weixin_57062986/article/details/132648915

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>v-bind</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style type="text/css">
    </style>

</head>

<body>
    <div id="app" class="image">
        <div>
            <p>条件翻译：</p>
            <select v-model="obj.lang">
                <option value="2">s</option>
                <option value="1">sb</option>
            </select>

        </div>
        <div>
            <textarea v-model="obj.words"></textarea>
        </div>
        <div>{{ result }}</div>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                words: '',
                ojb: {
                    words: '',
                    lang: '1'

                },
                result: '',
                //timer:null

            },
            watch: {
                words(newValue, olddValue) {

                },
                'obj.words'(newValue) {
                    //防抖
                    clearTimeout(this.timer)
                    this.timer = setTimeout(async () => {
                        const res = await axios.get({
                            url: 'https://applet-base-api-t.itheima.net/api/translate',
                            params: {
                                words: newValue

                            }
                        })
                        this.result = res.data.data
                        console.log(res)
                    }, 300)
                },
                obj: {
                    deep: true,//深度监视
                    immediate:true,//初始化也触发
                    //数据修改触发
                    handler(newValue) {
                        clearTimeout(this.timer)
                        this.timer = setTimeout(async () => {
                            const res = await axios.get({
                                url: 'https://applet-base-api-t.itheima.net/api/translate',
                                params: newValue
                            })
                            this.result = res.data.data
                            console.log(res)
                        }, 300)

                    }
                }
            },

            methods: {


            }

        })
    </script>

</body>

</html>