局部刷新

最新推荐文章于 2024-04-09 16:29:43 发布

莫羽_Yang

最新推荐文章于 2024-04-09 16:29:43 发布

阅读量3.9k

点赞数 1

文章标签： javascript vue.js

本文链接：https://blog.csdn.net/qq_41893424/article/details/114984692

版权

在项目开发过程中，局部刷新是个很常见的需求。就比如说点击按钮，使页面的某一个局域数据刷新，亦或是定时更新页面某个表格的数据，并更新表格显示。所以说所谓局部刷新就是不刷新整个网页而更新页面的部分内容。

目前做过的局部刷新有以下中：
一、原生js做局部刷新
思路：这种不使用框架的局部刷新，无疑是离不开js对dom的操作，js获取需要局部刷新的区域，通过js填写区域内容，这里不考虑浏览器兼容性的话，使用ES6的字符串模板在js中写html还是很香的。

<body>
    <div id="container">
        <header>头部</header>
        <div id="content">
            <div id="nav">导航部分</div>
            <div id="main">主要显示部分，需要刷新部分</div>
        </div>
        <footer>底部</footer>
    </div>

    <script>
        function reflashHtml(){
            var el = document.getElementById("main")
            var data = [1,2,3]
            var html = `
                <table>
                    <tbody>
                        <tr>
                            <td>${data[0]}</td>
                            <td>${data[1]}</td>
                            <td>${data[2]}</td>
                        </tr>
                    </tbody>
                </table>
            `
            el.innerHTML(html)
        }
    </script>
</body>

这里只做个简单的示例，提供个思路。

二、Vue项目中做局部刷新
思路：使用框架做局部刷新就方便多了，像Vue做点击按钮页面切换这种需求是路由跳转或者路由嵌套的问题。Vue实现了数据的双向绑定，所以做局部数据刷新还是很方便的。另外，关于路由嵌套，如果不是很复杂的需求，其实可以用插槽(v-slot)结合条件渲染(v-if)代替局部刷新.

莫羽_Yang

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
局部刷新

在项目开发过程中，局部刷新是个很常见的需求。就比如说点击按钮，使页面的某一个局域数据刷新，亦或是定时更新页面某个表格的数据，并更新表格显示。所以说所谓局部刷新就是不刷新整个网页而更新页面的部分内容。目前做过的局部刷新有以下中：一、原生js做局部刷新思路：这种不使用框架的局部刷新，无疑是离不开js对dom的操作，js获取需要局部刷新的区域，通过js填写区域内容，这里不考虑浏览器兼容性的话，使用ES6的字符串模板在js中写html还是很香的。<body> <div id="co
复制链接

扫一扫