使用计算属性改写代码

打开WebStorm开发工具，新建一个名为‘’的文件，并将vue.js文件放在同一目录下，并将其引入页面中。 lt;script type"text/javascript" src"vue.

打开WebStorm开发工具，新建一个名为‘’的文件，并将vue.js文件放在同一目录下，并将其引入页面中。

lt;script type"text/javascript" src"vue.js"gt;lt;/scriptgt;

在body标签内添加一个div标签，用于测试字符串分割功能，并输出分割后的第一组元素。代码如下：

lt;!DOCTYPE htmlgt;
lt;html lang"en"gt;
lt;headgt;
    lt;meta charset"UTF-8"gt;
    lt;script type"text/javascript" src"vue.js"gt;lt;/scriptgt;
    lt;titlegt;Titlelt;/titlegt;
lt;/headgt;
lt;bodygt;
    lt;div id"app"gt;
        lt;h2gt;{{ msg.split(';')[0] }}lt;/h2gt;
    lt;/divgt;
    lt;scriptgt;
        var vue  new Vue({
            el: "#app",
            data: {
                msg: "hello,world",
            },
        });
    lt;/scriptgt;
lt;/bodygt;
lt;/htmlgt;

使用计算属性优化代码

上述代码能够实现效果，但不够优雅。我们可以使用计算属性来改写代码，如下所示：

lt;!DOCTYPE htmlgt;
lt;html lang"en"gt;
lt;headgt;
    lt;meta charset"UTF-8"gt;
    lt;script type"text/javascript" src"vue.js"gt;lt;/scriptgt;
    lt;titlegt;Titlelt;/titlegt;
lt;/headgt;
lt;bodygt;
    lt;div id"app"gt;
        lt;h2gt;{{ splitStr }}lt;/h2gt;
    lt;/divgt;
    lt;scriptgt;
        var vue  new Vue({
            el: "#app",
            data: {
                msg: "hello,world",
            },
            computed:{
                splitStr(){
                    return (';')[0];
                }
            }
        });
    lt;/scriptgt;
lt;/bodygt;
lt;/htmlgt;

为计算属性添加setter方法

为了更改用于计算的值，我们可以为计算属性添加setter方法。代码如下：

lt;!DOCTYPE htmlgt;
lt;html lang"en"gt;
lt;headgt;
    lt;meta charset"UTF-8"gt;
    lt;script type"text/javascript" src"vue.js"gt;lt;/scriptgt;
    lt;titlegt;Titlelt;/titlegt;
lt;/headgt;
lt;bodygt;
    lt;div id"app"gt;
        lt;h2gt;{{ splitStr }}lt;/h2gt;
        lt;button v-on:click"clickHandler"gt;点我更改值lt;/buttongt;
    lt;/divgt;
    lt;scriptgt;
        var vue  new Vue({
            el: "#app",
            data: {
                msg: "hello,world",
            },
            methods: {
                clickHandler() {
                    this.splitStr  "world,hello";
                }
            },
            computed: {
                splitStr:{
                    get(){
                        return (';')[0];
                    },
                    set(newValue){
                          newValue;
                    }
                }
            }
        });
    lt;/scriptgt;
lt;/bodygt;
lt;/htmlgt;

查看效果

打开网页，点击按钮后，可以看到输出的内容已成功更改。