【Vue】Vue中Date数组更改后不更新html视图元素显示的解决方法（完整示例）

最新推荐文章于 2024-03-16 09:36:30 发布

敦厚的曹操

最新推荐文章于 2024-03-16 09:36:30 发布

阅读量249

点赞数

分类专栏： 26.【Vue】文章标签： Vue.js 数据绑定事件处理 JavaScript 前端开发

本文链接：https://blog.csdn.net/dxnn520/article/details/122964112

版权

26.【Vue】专栏收录该内容

109 篇文章 7 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div {
        width: 200px;
        height: 200px;
        background-color: beige;
    }
</style>
<script src="js/vue/vue.js"></script>

<body>
    <div id="bottom_bar" @click="showInfo">
        {{img[0]}}
    </div>

</body>


<script type="text/javascript">
    var temp_index = 0;
    var bottom_bar = new Vue({
        el: '#bottom_bar',
        data: {
            img: ["a", "b", "c", "d"]
        },
        methods: {
            showInfo() {
                console.log("this.img[0]=" + this.img[0])
                Vue.set(this.img, 0, "我是中国人");
                console.log("---------------")
                console.log("this.img[0]=" + this.img[0])
            }

        }
    })
</script>
</html>

敦厚的曹操

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【Vue】Vue中Date数组更改后不更新html视图元素显示的解决方法（完整示例）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&gt...
复制链接

扫一扫