当前位置：首页 > news >正文

Vue——认识day04_计算属性（案例：实时预览）

news 来源：原创 2024/9/23 9:37:03

1.计算属性之姓名案例之插值语法的实现

2.计算属性之姓名案例之methods语法的实现

3.计算属性之姓名案例之计算属性语法的实现

4.计算属性的简写方式

1.计算属性之姓名案例之插值语法的实现

代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>姓名案例_插值语法实现</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
</head>
<body><div id="root">姓:<input type="text" v-model="firstName"><br><br>名:<input type="text" v-model="lastName"><br><br><!-- slice(0,3):表示显示三位 --><!-- 全名:<span>{{firstName.slice(0,3)}}-{{lastName}}</span> -->全名:<span>{{firstName.slice(0,3)}}-{{lastName}}</span></div></div></body><script type="text/javascript">Vue.config.productionTip=falsenew Vue({el:'#root',data:{firstName:'W',lastName:'J'}});
</script>
</html>

2.计算属性之姓名案例之methods语法的实现

代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>姓名案例_methods实现</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
</head>
<body><div id="root">姓:<input type="text" v-model="firstName"><br><br>名:<input type="text" v-model="lastName"><!-- slice(0,3):表示显示三位 --><br><br>全名:<span>{{getFullName()}}</span><br><br><!-- <button @click="getFullName(firstName,lastName)">点击获取全名</button> --></div></div></body><script type="text/javascript">Vue.config.productionTip=falsenew Vue({el:'#root',data:{firstName:'W',lastName:'J'},methods: {getFullName(firstName,lastName){// alert(firstName + '-' + lastName)return this.firstName + '-' + this.lastName}},});
</script>
</html>

3.计算属性之姓名案例之计算属性语法的实现

计算属性是Vue中的一种特殊属性，它不存在于数据对象中，而是通过已有属性进行计算得到的。计算属性的实现原理是借助了Object.defineProperty方法提供的getter和setter函数。当初次读取计算属性时，会执行一次getter函数；当依赖的数据发生改变时，会再次调用getter函数。相比于使用methods中的函数来实现相同的计算逻辑，计算属性具有缓存机制，因此效率更高。另外，调试计算属性也更加方便。

需要注意的是，计算属性最终会出现在Vue实例的vm对象上，可以直接读取和使用。如果需要修改计算属性的值，必须在计算属性的set函数中进行响应式的更新，并确保更新的同时引起计算属性所依赖的数据发生变化。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>姓名案例_计算属性实现</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
</head>
<body><div id="root">姓:<input type="text" v-model="firstName"><br><br>名:<input type="text" v-model="lastName"><br><br>全名:<span>{{fullName}}</span><br><br><!-- 由于计算属性这里有缓存所以之后的都没有调用get 但是对于method一直都会调用 -->全名:<span>{{fullName}}</span><br><br>全名:<span>{{fullName}}</span><br><br></div></div></body><script type="text/javascript">Vue.config.productionTip=falseconst vm = new Vue({el:'#root',data:{firstName:'W',lastName:'J'},// 计算属性computed:{fullName:{// get的作用：当有人读取fullName时get就会被调用// 返回值就是fullName 的值// get的调用时机：// 1.初次读取fullName时// 2.所依赖的数据发生变化时(防止脏读)get(){return this.firstName + '-' + this.lastName},// set的调用时机：当fullName被修改时set(value){console.log('set:' + value)const arr = value.split('-')this.firstName = arr[0]this.lastName = arr[1]}}}});
</script>
</html>

4.计算属性的简写方式

代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>姓名案例_计算属性实现</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
</head>
<body><div id="root">姓:<input type="text" v-model="firstName"><br><br>名:<input type="text" v-model="lastName"><br><br>全名:<span>{{fullName}}</span></div></div></body><script type="text/javascript">Vue.config.productionTip=falseconst vm = new Vue({el:'#root',data:{firstName:'W',lastName:'J'},// 计算属性// 在确定只读不改之后可以采用简写的形式computed:{// 完整写法
/*             fullName:{get(){console.log('get被调用了')return this.firstName + '-' + this.lastName},set(value){console.log('set:' + value)const arr = value.split('-')this.firstName = arr[0]this.lastName = arr[1]}} *///简写// 这里的function就相当于get()// fullName:function(){fullName(){console.log('get被调用了')return this.firstName + '-' + this.lastName}}});
</script>
</html>