1. 首页>
  2. 技术文章>
  3. vue3学习第7天

vue3学习第7天

10/21/23 10:19:23 PM 浏览 403 评论 0

vue

时间转换成标准的时间格式:

new Date().toLocaleString();

时间加60分钟:

new Date(this.thisRunTime.setMinutes(this.thisRunTime.getMinutes()+60)).toLocaleString()

vue中list元素变更没有即时响应的处理:

app.$set(item,"status","INIT");

浏览器保存值,关闭后也可以拿到值:

localStorage.getItem('cacheCurrGroup');
localStorage.setItem('cacheCurrGroup', groupName);

数组排序:

array.sort();

数组中是否存在元素:

arrTempGroupName.includes(item.groupName)

深拷贝:

JSON.parse(JSON.stringify(arrTempTask))

是否存在值:

arrTempGroupName.includes(item.groupName)

computed例子:

<div id="app">
    <ul v-for="(item,index) in list">
        <li :class="{red:item.score<100}">{{item.score}}</li>
    </ul>
    {{TotalScore}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@latest/dist/vue.js"></script>
<script>
    const app = new Vue({
        //element缩写
        el: '#app',
        data: {
           list:[
            {subject:"语文",score:99},
            {subject:"数学",score:100}
           ]
        },
        computed:{
            TotalScore(){
                return this.list.reduce((sum,item) => sum + item.score,0);
            }
        }
    })
</script>

computed计算属性有缓存,当页面上需要多次返回同样值的时候,并用方法好,方法是每次调用都重新运算一次。计算属性也可以修改,当需要修改的时候,需要用完整的写法:

computed:{
   计算属性名:{
       get{return 结果;}
       set(修改的值){}//当计算属性值被重新赋值的时候,会触发这里
   }   
}


网友讨论