本文共 1436 字，大约阅读时间需要 4 分钟。

8、侦听属性

当你有一些数据需要随着其它数据变动而变动时，可以使用侦听属性

例1：

data: {    firstName: '道格拉斯',    lastName: '狗剩'    fullName: '道格拉斯 狗剩' },watch: {    firstName(val){        console.log('firstName changed...')        this.fullName = val + ' ' + this.lastName    },​    lastName(val){        console.log('lastName changed...')        this.fullName = this.firstName + ' ' + val    }} 名：姓：{
  {fullName}}

例2：

data: {    firstName: '道格拉斯',    lastName: '狗剩'    // fullName: 'Foo Bar' //既然fullName需要被计算，那么将此属性放在计算属性中},computed: {    fullName () {        return this.firstName + ' ' + this.lastName    }}

例3：

    Ask a yes/no question:        提问
{
  { answer }}
 var app = new Vue({    el: '#app',    data: {        question: '',        answer: '请提问!'    },    methods: {        getAnswer: function () {​            this.answer = '我想想...'            var vm = this            $.ajax({                url: 'https://yesno.wtf/api',                type: 'get',                success(data) {                    // console.log(this);                    vm.answer = data.answer                },                error (error) {                    vm.answer = '网找不到API接口. ' + error                }            })        }    }})

使用watch：

watch: {    // 如果 `question` 发生改变，这个函数就会运行    question: function (newQuestion, oldQuestion) {        this.answer = '等待您停止输入...'        this.getAnswer()    }}

转载地址：http://syzki.baihongyu.com/