vue练习demo8-computed

Vue.js与时间戳：计算属性与方法的使用

最新推荐文章于 2024-07-03 23:36:40 发布

原创最新推荐文章于 2024-07-03 23:36:40 发布 · 340 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #elementui

vue 专栏收录该内容

27 篇文章

订阅专栏

这篇博客介绍了如何在Vue.js应用中使用方法和计算属性来获取当前时间戳。示例代码展示了在模板中调用`currentTime1`方法和`currentTime2`计算属性，展示实时的时间戳更新。通过`Date.now()`获取时间戳，强调了计算属性的缓存特性。

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>-->
    <script src="../js/vue.min.js"></script>
</head>
<body>
    <!-- view -->
    <div id="app">
        当前时间戳：{{currentTime1()}}
        <br>
        当前时间戳：{{currentTime2}}
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
              message: 'hello'
            },
            methods: {
                currentTime1: function() {
                    return Date.now();
                }
            },
            // 计算属性，缓存功能
            computed: {
                currentTime2: function() {
                    // 重新读取
                    // this.message;
                    return Date.now();
                }
            }
        })
    </script>
</body>
</html>