vue（计算属性）

最新推荐文章于 2024-04-03 12:14:22 发布

机场德克士双人套餐事件

最新推荐文章于 2024-04-03 12:14:22 发布

阅读量540

点赞数

文章标签：前端 vue.js

本文链接：https://blog.csdn.net/m0_73495603/article/details/127324336

版权

计算属性的基本结构

计算属性

可以在里面写一些计算逻辑的属性。

他不像普通函数那样直接返回结果,而是经过一系列计算之后再返回结果。

同时只要在它当中应用了data中的某个属性，当这个属性发生变化时,计算属性可以嗅探到这种变化,并自动执行

定义:要用的属性不存在,通过已有属性计算得来。

使用:在computed对象中定义计算属性,在页面中使用{{方法名}}来显示计算的结果。

计算属性的缓存特性

第一次调用计算属性时,会产生一个结果,这个结果会被缓存起来,后面每次用这个属性都是从缓存里取。

当它的依赖项发生改变,会重新计算得到一个结果,再缓存起来

<script>
    //基本结构
    new Vue ({
        el:'',
        //数据

        data:{},
        // 方法属性
        // 事件绑定，不用return，没有缓存

        methods:{},
        // 侦听器（重视结构）
        // 监听一个值的改变，不用返回值
        watch:{
                要侦听的数据(){}
        },
        // 计算属性（重视结果）
        // 必须有return，只求结果，有缓存
        copputed:{
            计算属性名(){
                //经过一系列计算
                return 处理操作后结果
            }

        }
    })
 </script>

计算属性的基本使用

<div id="app">

<p>原始字符串:{{ message }}</p >

<p>计算反转后的字符串:{{·reverseMessage·}}</p >

<p>将原字符串转为小写:{{ toLowerCase}}</p >

</div>

<script src="../vue.js"></script>

<script>

new Vue ({

el:'#app',

data:{

message:'ABCDEFG'

},

computed:{

// 计算反转后的字符串

reverseMessage:function(){

// split()把一个字符串分割成字符串数组

// reverse()颠倒数组中元素的顺序

// join()把数组中的所有元素转换为一个字符串

return this.message.split('').reverse().join('')

},

//将原字符串转换为小写

toLowerCase(){

//substring(from,to)提取字符串中介于两个指定下标之间的字符

//toLowerCase()用于把字符串转换为小号

return this.message.substring(0,7).toLowerCase

}

}

})

</script>

计算属性的完整结构

1.每一个计算属性都包含一个getter函数与setter函数。

2.计算属性会默认使用getter函数,setter函数并不常见,所以一般计算属性getter和setter都不写。

3.getter函数是默认用法,setter函数不是默认用法。如果要使用setter函数，必须手动写出setter函数。

4.setter函数内的形参是你要修改的值

<!-- 准备好一个容器 -->
<div id="app">
姓:<input type="text" v-model="lastName"> <br><br>
名:<input type="text" v-model="firstName"> <br><br>
全名:<span>{{ fullNamel}</span> <br><br>
<button @click="btn">修改计算属性的值</button>
</div>
<!-- 引入Vue -->
<script src="../vue.js"></script>

<script>
new Vue({
el:'#app',
 data(){
return {
firstName:'图图', 
lastName:'胡'
}
},
computed:{
fullName:{
// get:获取值时触发
// 当有人读取ful1Name时,get就会被调用,且返回值就作为fullName的值。
 get(){
return this.firstName +'_' +this.lastName;
},
//set；设置值时触发
//当计算属性被修改时，调用set
set(value){
    console.log('set',value);
    const arr = value.split('-')
    this.firstName = arr[0]
    this.lastName = arr[1]
}
}
},
methods:{
    btn(){
        this.fullName = '胡英俊'
    }
}
})
</script>

2

<script>

// 1.声明字符串

let str ='宇宙的中心-江西软件职业技术大学';

let str1 = "宇宙的中心-江西软件职业技术大学";

let str10 ='宇宙的中心-江西软件职业技术大学';

// 2.判断一个字符串在不在某个字符串里面

let index1 = str.index0f('宇宙')

console.log(index1);//0

// 3.截取字符串(第一个参数:从哪个下标开始截取;第二个参数:截取的长度。

let str2 = str.substr(7,2)

console.log(str2); // 江西

// 4.修改字符串(第一个参数:要修改的字符串;第二个参数:修改后的字符串。

let str3 = str.replace("宇宙","互联网")

console.log(str3);// 互联网的中心--江西软件职业技术大学

// 5.分割字符串

let str4 = "23"

// 这个函数返回的一定是一个数组

let array = str4.split(',')

// 为分隔符，找到分隔符后，将其从字符串删除，并将子字符串的数组返回。

// 如果没有找到或省略了分隔符，则该数组包含了一个由整个字符串组成的元素。

// 如果分隔符为空字符串，则将str转换为字符数组

console.log(array); //['撒'，"浪'，"嘿'，'哟']

// 6.大小写转换(只有英文才有大小写，中文不存在大小写)

console.log('ABCDEF'.toLowerCase());// 转化为小写 abcdef

console.log('abcdef'.toUpperCase());// 转化为大写 ABCDEF

console.log('中文不存在大小写'.toLowerCase);

</script>

作业

<body>
    <script src="./vue.js"></script>
    <style>
        div#app {
        width:250px;
        margin: 30px auto;
        border: 1px solid □#666;
         border-radius:10px; 
         padding:10px;
        }
        
        p {
            text-align: center;
        }
       
        </style>
        </head>
        <body>
        <div id="app">
        <p>
        <input type="text" placeholder="猜数字"v-model="gueassed">
    </p >
    <p>
        {{res}}</p >
        </div>
        <script>
        new Vue({
        el: '#app', data:{
        gueassed:'',
        // 生成随机数0-100
        a:Math.floor(Math.random() * 100),},
        computed:{
        res:{
        //当有人读取fantcc，就会调用get， 
        get() {
        const b = this.gueassed * 1; 
        const a = this.a
        if (a == b)
        return"恭喜你猜对了"
         if (b == 0)
        return "请猜一个介于1和100之间的整数";
         if (b > a)
        return"大了，往大一点猜"
         if (b < a)
        return"小了，往大一点猜"
        },
        }	}	
        })
        </script>
</body>