提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

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

Vue方法HTML数组 解决 显示 示例 更新
2023-09-11 14:14:57 时间 

<!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>

相关文章