Vue的计算属性和watch监听

最新推荐文章于 2024-04-18 14:33:53 发布

SZH勿忘初心

最新推荐文章于 2024-04-18 14:33:53 发布

阅读量379

点赞数

本文链接：https://blog.csdn.net/qq_39182939/article/details/105003564

版权

<body>
    <div id="app">
        <h1>您的生日是：{{
            new Date(birthday).getFullYear() + '-'+ new Date(birthday).getMonth()+ '-' + new Date(birthday).getDay()
            }}
        </h1>
        <h1>您的生日是：{{birth()}} </h1>
        <h2>{{name}}，非常帅！！！</h2>
    </div>
</body>
<script src="node_modules/vue/dist/vue.js" ></script>
<script>
    // 创建vue实例
    var app = new Vue({
        el:"#app", // el即element，该vue实例要渲染的页面元素
        data:{ // 渲染页面需要的数据
            name: "峰哥",
            birthday:1529032123201 // 毫秒值
        },
        methods:{
            birth(){// 计算属性本质是一个方法，但是必须返回结果
                const d = new Date(this.birthday);
                return d.getFullYear() + "-" + d.getMonth() + "-" + d.getDay();
            }
        }
    });

</script>

2.计算属性

计算属性本质就是方法，但是一定要返回数据。然后页面渲染时，可以把这个方法当成一个变量来使用。

computed:{
    birth2(){// 计算属性本质是一个方法，但是必须返回结果
        const d = new Date(this.birthday);
        return d.getFullYear() + "-" + d.getMonth() + "-" + d.getDay();
    }
}

<h1>您的生日是：{{birth2}} </h1> 这个时候不用加括号表示函数

3.watch监听

<div id="app">
<input type="text" v-model="message">
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
message:""
},
watch:{
message(newVal, oldVal){
console.log(newVal, oldVal);
}
}
})
</script>

SZH勿忘初心

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue的计算属性和watch监听

1.<body> <div id="app"> <h1>您的生日是：{{ new Date(birthday).getFullYear() + '-'+ new Date(birthday).getMonth()+ '-' + new Date(birthday).getDay() }...
复制链接

扫一扫