计算属性
计算属性：
定义：要用属性不存在，需要通过已有属性计算得来。
原理：底层借助了Objcet.defineproperty()方法提供的getter和setter
1.get函数初次读取时会执行一次
2.当依赖的数据发生改变时会被再次调用
备注：
- 计算属性最终会出现在vm上，直接读取使用即可
- 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变
- 如果计算属性确定不考虑修改，可以使用计算属性的简写形式
<!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>手写公式识别系统</title>
<script src="../js/vue.js"></script>
</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>
<script>
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
firstName:'张',
lastName:'三'
},
computed:{
fullName:{
get(){
return this.firstName + '-' + this.lastName
},
set(value){
const arr = value.split('-')
this.firstName = arr[0]
this.lastName = arr[1]
}
}
}
})
</script>
</body>
</html>
运行展示
WebStorage
浏览器端通过Window.sessionStorage和Window.localStorage属性来实现本地存储机制
相关API：
1.xxxStorage.setItem('key', 'value')：该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值
2.xxxStorage.getItem('key')：该方法接受一个键名作为参数，返回键名对应的值
3.xxxStorage.removeItem('key')：该方法接受一个键名作为参数，并把该键名从存储中删除
4.xxxStorage.clear()：该方法会清空存储中的所有数据
备注：
xxxStorage.getItem(xxx)如果 xxx 对应的 value 获取不到，那么getItem()的返回值是null
JSON.parse(null)的结果依然是null
163
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
