vue的模板

最新推荐文章于 2023-07-25 02:15:00 发布

Gnaf12345

最新推荐文章于 2023-07-25 02:15:00 发布

阅读量182

点赞数

文章标签： vue.js java 前端

本文链接：https://blog.csdn.net/Gnaf12345/article/details/125569837

版权

<div id="app">
    

</div>

与上面模块进行绑定，与其进行数据传递，两者的关系为一对一

 new Vue({
        el:"",//挂载元素
        data(){  //数据传递
            return{
              
            }
        },
        methods:{  //事件方法
          
            },
        computed:{ //数据进行改动的方法
       }
          
    })

小案例：留言板的数据传递和时间方法

 new Vue({
        el:"#container",//挂载元素
        data(){
            return{  //传输数据
                nick:'',
                msg:'',
                list:[],
            }
        },
        methods:{    //各种事件的方法
           
            tj(){
                // 1.内容不能为空
                if(this.nick===''||this.msg===''){
                    alert('内容不能为空');
                    return;
                }
                // 2、生成指定类型的obj
                let obj={
                    nick:this.nick,
                    msg:this.msg,
                    time:this.getNowTime(),
                }
                // 3、将obj添加到list中
                this.list.push(obj);
                // 4、数据清空
                this.nick="",
                this.msg=""
            },
            del(index){
                this.list.splice(index,1);
            }
        }
    })