1.vue计算属性-computed
一个数据, 依赖另外一些数据计算而来的结果
computed: {
"计算属性名" () {
return "值" } } 注意1: 计算属性和data属性都是变量-不能重名. 用法和data相同
注意2: 函数内变量变化, 会自动重新计算结果返回
例子:
- 需求:
- 需求1: 求2个数的和显示到页面上
- 需求2: 字符串翻转
<template> <div> <p>和为: {
{
num }}</p> <p>{
{
reverseMessage }}</p> </div> </template> <script> export default {
data() {
return {
a: 10, b: 20, message: "我是个字符串", }; }, computed: {
num() {
return this.a + this.b; }, reverseMessage() {
return this.message.split("").reverse().join(""); }, }, }; </script> 2.vue计算属性-缓存
计算属性是基于它们的依赖项的值结果进行缓存的，只要依赖的变量不变, 都直接从缓存取结果
<template> <div> <p>{
{
reverseMessage }}</p> <p>{
{
reverseMessage }}</p> <p>{
{
reverseMessage }}</p> <p>{
{
getMessage() }}</p> <p>{
{
getMessage() }}</p> <p>{
{
getMessage() }}</p> </div> </template> <script> export default {
data(){
return {
msg: "Hello, Vue" } }, // 计算属性优势: // 带缓存 // 计算属性对应函数执行后, 会把return值缓存起来 // 依赖项不变, 多次调用都是从缓存取值 // 依赖项值-变化, 函数会"自动"重新执行-并缓存新的值 computed: {
reverseMessage(){
console.log("计算属性执行了"); return this.msg.split("").reverse().join("") } }, methods: {
getMessage(){
console.log("函数执行了"); return this.msg.split("").reverse().join("") } } } </script> <style> </style> 
3.vue计算属性-完整写法
计算属性也是变量, 如果想要直接赋值, 需要使用完整写法
语法:
完整语法: computed: {
// "计算属性名" (){}, "计算属性名": {
set(值){
}, get(){
return 值 } } } 需求:
- 计算属性给v-model使用
页面准备输入框
<template> <div> <div> <span>姓名:</span> <input type="text" v-model="full"> </div> </div> </template> <script> // 问题: 给计算属性赋值 - 需要setter // 解决: /* 完整语法: computed: { "计算属性名" (){}, "计算属性名": { set(值){ }, get(){ return 值 } } } */ export default {
computed: {
full: {
// 给full赋值触发set方法 set(val){
console.log(val) }, // 使用full的值触发get方法 get(){
return "无名氏" } } } } </script> <style> </style> 想要给计算属性赋值, 需要使用set方法
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/224404.html原文链接：https://javaforall.net
