自己第一个vue项目通讯录作业-模仿通讯录用户列表

自己第一个vue项目通讯录作业

自学vue框架!第一眼的 感觉是很简单 很便捷 然后就潦草的看 了点视频!

然后就有了这个作业 然后就试着用vue写 后来也有很多的难点 就开始不断的找人去问!

一点点的也学到了很多知识!熬了2个夜晚才完成的!

总重要的一点就是要多看 官方文档! 官方文档! 官方文档!

 

先把前端css写完然后在嵌入VUE.js

  前端页面就没什么好说的了!上js!


var app = new Vue({
    el: '#app',
    data: {
        /**第1 第2  */
        title: '',
        name:'',
        /*显隐 */
        zeng:false,
        wenzi:true,
        xiu:false,
        /* */
        styles:'nei',
        gnjiankongzhi:'contact1_moban2',
        diankongzhi : 'sandian',
        /*存进去 */
        list: [],
        sjshu:'',
        /** */
        index:-1,
        touxiang:['img/tx/0.jpg','img/tx/1.jpg','img/tx/2.jpg','img/tx/3.jpg','img/tx/4.jpg','img/tx/5.jpg','img/tx/6.jpg','img/tx/7.jpg','img/tx/8.jpg','img/tx/9.jpg']
    },
    methods: {
        addFun() {
            if(this.title!='' || this.name!=''){
                /*存己去 push */
                this.list.push({
                    title: this.title,
                    name:  this.name,
                    /*头像 */
                    url:this.touxiang[this.sjshu],
                    sfbj:false
                });
                this.title='',
                this.name=''
                this.zeng=false;
                this.wenzi=false;
                this.styles='nei'
            }
        },
        zengjia(){
                 /**显隐  */
                this.zeng=true;
                this.styles='nei2'
                /**随机数  */
                this.sjshu = Math.floor(Math.random() *10);
                /*箭头函数 function */
                this.list.map((item,i)=>{
                    item.sfbj=false
                    return item
                })
                /**扩展运算符  spread 新数 */
                this.list = [...this.list]   
                /*为空 */
                this.title = "" 
                this.name = ""
        },
        quxiao(){
            this.zeng=false
            this.xiu=false 
            this.styles='nei'
        },
        sandian(index){
             /*箭头函数=> function */
            /**map for */
            this.list.map((item,i)=>{
                /**注释 */
                if(index==i){
                    /**sfbj 状态 是否编辑 */
                    item.sfbj=!item.sfbj
                }
                else{
                    item.sfbj=false
                }
                return item
            })
            /**扩展运算符  spread 新数 */
            this.list = [...this.list]    
            /*为空 */
            this.title = "" 
            this.name = ""        
        },
        /*删除 */
        deleteInfo(index){
            this.list.splice(index,1);
        },
        bianjixia(index){
            this.styles='nei2'
            this.xiu=true;
            this.index = index
        },
        addFun2(){
            this.styles='nei'
            this.xiu=false 
            /*箭头函数=> function */
            /**map for */
            this.list.map((item,i)=>{
                if(i==this.index){
                    item.title = this.title
                    item.name = this.name
                    item.url = this.touxiang[this.sjshu]
                }
                return item
            })
            /**扩展运算符  spread   新数 */
            this.list = [...this.list]
        },
        sjtouxiang(){
            this.sjshu = Math.floor(Math.random() *10);
        },


    },


})

资源下载

上一篇

【趣味编程】HTML+Javascript制作拖动式拼图小游戏