使用計算屬性改寫代碼

打開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;

查看效果

打開網頁，點擊按鈕后，可以看到輸出的內容已成功更改。