Vue-HelloWorld（2-2）

最新推荐文章于 2024-01-04 23:07:25 发布

罗彬桦

最新推荐文章于 2024-01-04 23:07:25 发布

阅读量83

点赞数

分类专栏： Vue 文章标签： JavaScript Vue 计时器实时更新数据绑定

本文链接：https://blog.csdn.net/weixin_45647118/article/details/113447407

版权

Vue 专栏收录该内容

56 篇文章 3 订阅

订阅专栏

在这里插入图片描述

思路： 我用了两种方式去体现，一种是用原始js，一种是用vue。
实现计时器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src='./vue.js'></script>
</head>
<body>
    <div id="app">{{content}}</div>
    <div>{{content}}</div>;


    <script>
        // 原始js的方法
        // var dom = docuemnt.getElementById('app');
        // dom.innerHTML = 'hello world'

        // setTimeout(function() {
        //     dom.innerHTML = 'bye world'
        // }, 2000)

        
		// vue.js的使用

        var app = new Vue({
            el: '#app',
            data: {
                content: 'hello world'
            }
        })

        setTimeout(function() {
            app.$data.content = 'bye world'
        }, 2000)

    </script>
</body>
</html>