【Vue.js】之监听实现搜索功能与翻译功能

最新推荐文章于 2023-01-10 10:35:10 发布

夹心776655

最新推荐文章于 2023-01-10 10:35:10 发布

阅读量367

点赞数 2

分类专栏：代码实例 Vue.js 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_37086980/article/details/112912995

版权

代码实例同时被 2 个专栏收录

72 篇文章 3 订阅

订阅专栏

Vue.js

30 篇文章 1 订阅

订阅专栏

监听器（watch）

watch监听器的用法相当于是我们监视一个数据的变化，在这个数据变化时执行一些操作，这个操作可以是任何操作

声明：

watch: {
	要监听的属性: function (newValue, oldValue) {},
	要监听的属性: '函数名' // methods中的函数
	要监听的属性: {
        handler (newValue, oldValue) {
        	console.log('watch', newUser)
        }
    }
}

如果监听的属性是引用类型(对象/数组)时，默认不会监听引用类型内部数据的改变，需要开启深度监听才能监听内部数据的改变

user: {
    handler (newUser) {
    	console.log('watch', newUser)
        if (newUser.username === 'admin') {
            this.usernameError = '账号已经注册'
        } else {
            this.usernameError = '可以使用'
        }
    },
    deep: true // 是否开启深度监听, 不推荐使用
}

推荐使用：

'user.username' (newValue) {
	console.log('watch', newValue)
}

数组的定义方式

'user.username': [
    'checkUserName1', // methods中的函数
    'checkUserName2',
    function (newValue) {
    	console.log('watch checkUserNam3', newValue)
    },
    {
        handler (newValue) {
            console.log('watch handler', newValue)
        }
    }
]

初始化时触发监听

msg: {
handler () {
	console.log('watch msg')
},
	immediate: true // 是否初始化时触发监听
},

利用监听实现搜索与翻译功能

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实现搜索和百度翻译功能</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        input,
        textarea,
        select {
            outline: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>内容搜索</h2>
        <p>
            <input type="text" v-model.trim="word">
        </p>
        <ul>
            <li v-for="item of list" :key="item">{{item}}</li>
        </ul>

        <h2>百度翻译</h2>
        <select v-model="type">
            <option value="">请选择翻译方式</option>
            <option value="cte">汉译英</option>
            <option value="etc">英译汉</option>
        </select><br><br>
        <textarea v-model.trim="sentence"></textarea>
        <textarea>{{translate}}</textarea>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            word: '',
            list: [],
            type: '',
            suffix: '',
            sentence: '',
            translate: ''
        },
        watch: {
            // 监听word的改变
            word() {
                // 只要word发生改变就调用接口
                // http://suggestion.baidu.com/su?cb=callback&wd=
                // 需要解决跨域问题
                // script调用外部链接时不会产生跨域问题, img , link
                // 解决跨域的方法: jsonp cors proxy

                // 使用原生js发送jsonp
                jsonp('http://suggestion.baidu.com/su?cb=callback&wd=' + this.word, 'callback',
                    (res) => {
                        // console.log(res)
                        this.list = res.s || []
                    })
            },
            type() {
                // console.log(this.type)
                let type = this.type
                switch (type) {
                    case 'cte':
                        this.suffix = '&to=en'
                        break;
                    case 'etc':
                        this.suffix = ''
                        break;
                    default:
                        this.suffix = ''
                }
            },
            // 监听要翻译的内容
            sentence() {

                // console.log(this.suffix)
                jsonp('https://api.asilu.com/fanyi?q=' + this.sentence + '&callback=callback' + this.suffix, 'callback',
                    (res) => {
                        // console.log(res)
                        this.translate = res.data || ''
                    })
            }
        }
    })

    function jsonp(url, cbName, handle) {
        // 1.创建script标签
        const jsonScript = document.createElement('script')
        // 2.设置src属性
        jsonScript.src = url
        // 3.把jsonScript添加到HTML中
        document.body.appendChild(jsonScript)
        // 4.定义callback函数
        window[cbName] = (res) => {
            // 把接口返回的数据传递到handle函数
            // console.log(res)
            handle && handle(res)
            // 5.删除jsonScript
        }
        document.body.removeChild(jsonScript)
    }
</script>
</html>

夹心776655

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【Vue.js】之监听实现搜索功能与翻译功能

监听器（watch）watch监听器的用法相当于是我们监视一个数据的变化，在这个数据变化时执行一些操作，这个操作可以是任何操作声明：watch: { 要监听的属性: function (newValue, oldValue) {}, 要监听的属性: '函数名' // methods中的函数要监听的属性: { handler (newValue, oldValue) { console.log('watch', newUser) } }
复制链接

扫一扫