VUE计算属性
2021/5/16 10:28:20
本文主要是介绍VUE计算属性,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
computed:注重结果
1.逻辑计算,防止模板过重
2.监听:依赖修改 。get方法必须return
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./vue.js"></script> </head> <body> <div id="box"> {{mycomputedname}} <hr> <input type="text" v-model="mytext" name="" id=""> {{mydatalist}} <ul> <li v-for="data in mydatalist"> {{data}} </li> </ul> </div> <script> new Vue({ el:'#box', data:{ myname:'kerwin', mytext:'', datalist:["aaa",'sdsd','sdsfs','sdfdsfds'] }, computed:{ mycomputedname(){ return this.myname.substring(0,1).toUpperCase()+this.myname.substring(1) }, mydatalist(){ return this.datalist.filter(item=>item.includes(this.mytext)) } } }) </script> </body> </html>
这篇关于VUE计算属性的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-30React Native常用组件-点击组件
- 2024-05-30uniapp+vue3+uv-ui手机端后台OA管理模板
- 2024-05-29Python网络爬虫的时候json=就是让你少写个json.dumps()
- 2024-05-27React Native常用组件-展示组件
- 2024-05-27React Native常用组件-列表组件
- 2024-05-09vue3开发前端表单缓存自定义指令,移动端h5必备插件
- 2024-05-09React Hooks在class组件中的使用方式
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode
- 2024-03-13vuex-persist