Vue---计算属性和监听器

文章目录

  • 一.计算属性
  • 二.计算属性与方法
  • 三.监听事件

一.计算属性

我们从之前的学习中可以看出,我们可以在模板语法中添加功能,从而改变我们的页面,但是,如果我们在模板语法中添加太多的功能,会使得我们的模板语法显得臃肿,在java,c, python的学习当中,我们会定义一个函数来解决我们主函数臃肿的问题,在这里,我们使用计算属性也非常的类似,但计算属性与方法又有不同之处,我们后面会介绍。

看一个实例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = "../js/vue.js"></script>
</head>
<body>
<div id = "app">
    <p>Original message: {
     {
     message}}</p>
    <p>Reversed message: {
     {
     ReversedMessage}}</p>
</div>
<script type = "text/javascript">
    const app = new Vue({
     
        el:"#app",
        data:{
     
            message:"Hello World!",
        },
        computed:{
     
            ReversedMessage:function(){
     
                return this.message.split('').reverse().join('');
            }
        }
    })
</script>
</body>
</html>

输出结果如下:
Vue---计算属性和监听器_第1张图片

二.计算属性与方法

我们从上面的例子看到,计算属性与我们常用的方法十分的类似,那为什么我们要有计算属性呢。实际上,它们还是有一定的区别。在上面的例子当中,如果我们的message没有改变,那么下一次我们相应ReversedMessage的时候,计算属性就会立刻返回之前的结果,而我们常用的方法要重新执行我们的函数。

三.监听事件

我们可以通过添加监听事件来观察我们的属性值是否发生了变化。
还是上面的例子,不过我们添加一个监听事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = "../js/vue.js"></script>
</head>
<body>
<div id = "app">
    <p>Original message: {
     {
     message}}</p>
    <p>Reversed message: {
     {
     ReversedMessage}}</p>
</div>
<script type = "text/javascript">
    const app = new Vue({
     
        el:"#app",
        data:{
     
            message:"Hello World!",
        },
        computed:{
     
            ReversedMessage:function(){
     
                return this.message.split('').reverse().join('');
            }
        },
        watch:{
     
            message:function(val){
     
                console.log("监听事件触发");
                console.log(val);
            }
        }
    })
</script>
</body>
</html>

Vue---计算属性和监听器_第2张图片
我们看到,当我们的属性值发生改变的时候,我们的监听事件触发了。

你可能感兴趣的:(vue)