极客观点
项目管理
HarmonyOS
我想设置的默认时间范围是当天的00:00:00到23:59:59。
我用v-model绑定data中的value1可以，但绑定computed的value2滚动会报错，这是为什么呢？
完整代码如下：
HTMLResult Skip Results Iframe EDIT ON
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.8/theme-chalk/index.css" rel="stylesheet">
</head>
<body>
<div id="app">
<el-time-picker is-range v-model="value2" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
placeholder="选择时间范围">
</el-time-picker>
<!-- <input type="text" v-model="dataStr"> -->
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.8/index.js"></script>
<script>
new Vue({
el: '#app',
data: function () {
return {
value1: [new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDay(), 0, 0, 0),
new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDay(), 23, 59, 59)
],
}
},
computed: {
value2: {
get() {
let date = new Date()
let y = date.getFullYear()
let m = date.getMonth() + 1
let d = date.getDay()
let start = new Date(y, m, d, 0, 0, 0)
let end = new Date(y, m, d, 23, 59, 59)
return [start, end]
},
set(newVal) {
this.value2 = newVal
}
},
},
methods: {
change(e) {
console.log('eee', e);
}
}
})
</script>
</html>
computed里面不能直接set变量自身，会造成死循环。一般是设置一个临时变量，get和set都是去操作这个变量。可以看下这个示例。