過濾器屬性:filters:

<div id = "app">{{num}}<br>{{num | toInt}}<br>{{num | toFloor}}<br>{{num | toCeil}}<br> </div> <script>let vm = new Vue({el: '#app',data:{num:'3.45',},// 過濾器filters:{toInt(value){return parseInt(value);},toFloor(val) {return Math.floor(val);},toCeil(val) {return Math.ceil(val);}}}) </script>

計算屬性:computed

<div id = "app">{{num1}} + {{num2}} = {{sum}} <br>{{num1}} - {{num2}} = {{subt}} </div> <script>let vm = new Vue({el:'#app',data:{num1:3,num2:2,},// 計算屬性computed:{sum(){return this.num1+ this.num2;},subt(){return this.num1- this.num2;}}}); </script>

方法屬性:methods
觀察變化:watch

<div id ='app'><p> a: {{a }}</p><button v-on:click="plus">+1</button><button v-on:click="to0">歸0</button> </div> <script>let vm = new Vue({el:'#app',data:{a: 0},methods:{plus():{return this.a++;},to0():{return this.a = 0;}},watch:{a(){alert('變化了!!!');}}}); </script> // 注:點擊+1按鈕時,直接執行plus函數. // 使用watch觀察a的值是否發生變化

參考 https://mp.weixin.qq.com/s?__biz=MzA3MDg1NzQyNA==&mid=2649654423&idx=1&sn=3371a68990ba2d9c957f5c5daba947cb&chksm=872c4328b05bca3ed82a143ea4fd622469cfb3629bb3e0a167602acbfe6a7f799e7e7d44bbbd&scene=21#wechat_redirect

總結

以上是生活随笔為你收集整理的vue --- 过滤器、计算、方法、观察属性的全部內容，希望文章能夠幫你解決所遇到的問題。

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