vue --- 过滤器、计算、方法、观察属性

过滤器属性: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 --- 过滤器、计算、方法、观察属性相关推荐

vue过滤器使用方法
vue过滤器使用方法过滤器分全局过滤器和局部过滤器.和自定义指令一样,过滤器对应的函数中的this是window(无论是全局的还是局部的),而不是当前vue的实例. <!DOCTYPE htm ...
vue 过滤器计算col占多少份
<template><div><el-row :gutter="20" class="mt-3&quo ...
Vue的计算属性、侦听属性与过滤器解析
文章目录知识点计算属性计算属性的基本使用计算属性的 setter 和 getter 侦听属性计算属性与侦听属性对比过滤器过滤器使用方法过滤器应用场景综合小练习知识点计算属性计算 ...
component、 filters（过滤器）、computed（计算属性）、$watch（观察属性）、设定计算属性
组件知识点 component component 定义页面的局部区域块,完成单独的页面小功能. <div id="myApp"><ol><game ...
Vue 过滤器、计算属性、侦听器图解版一目了然
文章目录本篇学习目标 1. vue基础 1.0_vue基础 v-for更新监测 1.1_vue基础_v-for就地更新 1.2_vue基础_虚拟dom 1.3_vue基础_diff算法情况1: 根 ...
vue过滤器和侦听器和计算属性
过滤器和侦听器和计算属性 1. 过滤器 1.1基本用法 1.2私有过滤器和全局过滤器 1.3 Dayjs 1.4 连续调用多个过滤器 1.5 过滤器传参 1.6 兼容性 2. watch 侦听器 2. ...
vue基础-动态class、动态style、vue过滤器、vue计算属性vue基础-动态class、动态style、vue过滤器、vue计算属性
vue基础-动态class.动态style.vue过滤器.vue计算属性文章目录 vue基础-动态class.动态style.vue过滤器.vue计算属性 vue基础-动态class vue基础-动 ...
【Vue】—计算属性缓存VS方法以及侦听器的区别
[Vue]-计算属性缓存VS方法以及侦听器的区别
理解Vue的计算属性
计算属性是一个很邪门的东西,只要在它的函数里引用了 data 中的某个属性,当这个属性发生变化时,函数仿佛可以嗅探到这个变化,并自动重新执行. 上述代码会源源不断的打印出 b 的值.如果希望 a 依赖 ...
Vue的计算属性computed和监听属性watch
Vue的计算属性computed 定义通过已有属性计算生成一个新的组合属性. 原理底层借助了Object.defineproperty方法提供的getter和setter来实现. 性质计算属性的 ...

vue --- 过滤器、计算、方法、观察属性

vue --- 过滤器、计算、方法、观察属性相关推荐

最新文章

热门文章