當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

计算属性的setter和getter

發布時間：2024/9/27 编程问答 31 豆豆

生活随笔收集整理的這篇文章主要介紹了计算属性的setter和getter 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

computed的屬性不僅可以寫一個get方法，通過其他的值算出一個新值；同時，也可以設置set方法，通過設置一個值，來改變他相關聯的值！而改變了相關聯的值之后，又會引起fullName的重新計算，頁面也會跟著顯示新的內容！

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>計算屬性的setter和getter</title><script src="../vue.js"></script> </head><body>  <div id="root"> </div><script>var vm = new Vue({el: '#root',data: {firstName: "gb",lastName: "lfy"},computed: function () {fullName: function f() {return this.firstName +" "+ this.lastName();}}}); </script> </body> </html>

computed屬性：
當computed依賴的值發生變化時，他就會重新計算；當set函數中this.firstName和 this.lastName 是fullName依賴的值；屬性變了，頁面的內容也會跟著變化！

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>計算屬性的setter和getter</title><script src="../vue.js"></script> </head><body>  <div id="root">{{fullName}} </div><script>var vm = new Vue({el: '#root',data: {firstName: "gb",lastName: "lfy"},computed: {fullName: {get: function () {return this.firstName + this.lastName();},set: function (value) {// console.log(value);var arr = value.split(" ");this.firstName = arr[0];this.lastName = arr[1];}}}}); </script> </body> </html>

總結

以上是生活随笔為你收集整理的计算属性的setter和getter的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： SonarQube启动报错：Wrappe
下一篇： Git添加为远程仓库