Chrome浏览器使用vue.js，代码无误，无法更新渲染_chrome 插件开发,vue渲染空白-CSDN博客

本文链接：https://blog.csdn.net/qq_38556427/article/details/103109117

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="node_modules/vue/dist/vue.js" ></script>

<body>
<div id="app1">
    <input type="text" v-model="num" >
    <br>
    <input type="button" value="加" @click="add" >
    <h2>
        {{name}}，非常帅！！！有{{num}}位女神为他着迷。
    </h2>

    <ul>
        <li v-for="(u,index) in list":key="index">{{u.name}}-{{u.age}}-{{u.address}}-{{index+1}}</li>
    </ul>

</div>
</body>

<script type="text/javascript">
    // 创建vue实例
    var app = new Vue({
        el: "#app1", // el即element，该vue实例要渲染的页面元素
        data: { // 渲染页面需要的数据
            name: "峰哥",
            num: 5,
            list:[
                {name:'csz',age:11,address:'蔡家'},
                {name:'csz',age:11,address:'蔡家'},
                {name:'csz',age:11,address:'蔡家'},
                {name:'csz',age:11,address:'蔡家'},
                {name:'csz',age:11,address:'蔡家'}
            ]
        },
        methods:{
            add(){
                this.num++;
                console.log(this.num);
                //console.log(this.num);
            }
        },
        created(){
            this.name="csz";
        },
        beforeUpdate(){
            console.log("beforeUpdate");

        },
        updated(){
            console.log("updated");

        }
    });

</script>

</html>