前端Vue框架进阶案例(任务列表,购物车,学生录入系统)

案例一:任务列表

 

!DOCTYPE html
html
head
    titleceshi/title
    script src="/upload/attach/blank.gif" data-echo="vue.js"/script
    style type="text/css"
        .span{
            color: skyblue;
        }
        ul{
            list-style: none;
        }
        .finsh{
            color:#ccc;
            text-decoration: line-through;
        }
    /style
/head
body
    div id="box"
        h2任务列表/h2
        p任务数:{{arr.length}}个,目前还有{{choose2()}}个任务未完成,span class="span" @click="choose3()"完成/span/p
        ul
            li v-for="(item,index) in arr" v-bind:class="{finsh:item.bol}"
                input type="checkbox" v-model="item.bol"/input
                span v-show="!item.boll" @dblclick="yc(index)"{{item.des}}/span
                span v-show="item.boll"input type="text" @dblclick="yc(index)" v-model="item.des"/input/span
            /li
        /ul

        input type="text" v-model="msg"/input
        button v-on:click="addRW()"添加/button
    /div
/body

script
    var vm = new Vue({
        el:"#box",
        data:{//变量
            msg:'',
            isShow:false,
            arr:[{des:'豪哥吃饭',bol:false,boll:false},{des:'豪哥吃尘',bol:false,boll:false},{des:'豪哥吃番薯',bol:false,boll:false}]
        },
        methods:{//添加方法
            addRW:function(){
                this.arr.push({des:this.msg,bol:false});
            },//判断还有多少个未完成
            choose2:function(){
                var num=this.arr.length;
                this.arr.forEach(function(item){
                    if (item.bol) {
                        console.log(item.bol);
                        num--;
                    }
                })
                return num;
            },
            choose3:function(){        
                for (let i=this.arr.length-1;i=0;i--){
                     if(this.arr[i].bol){
                       this.arr.splice(i,1);
                   }
               }    
               },yc:function(index){
                this.arr[index].boll=!this.arr[index].boll;
               }

        }
    });
/script
/html



案例二:购物车

 

!DOCTYPE html
html
head
    titleceshi/title
    script src="/upload/attach/blank.gif" data-echo="vue.js"/script
    style type="text/css"
        ul{
            list-style: none;
        }
    /style
/head
body
    div id="box"
        table
            tr
                td商品名称/td
                td商品单价/td
                td商品数量/td
                td操作/td
            /tr
            tr v-for="(item,index) in arr"
                td{{index+1}}/td
                td{{item.xh}}/td
                td{{item.jg}}/td
                tdbutton @click="jian(index)"-/button{{item.count}}button @click="zeng(index)"+/button/td
                tdbutton @click="delete1(index)"移除/button/td
            /tr
        /table
         p总价:¥{{totalPrice()}}/p 

/body

script
    var vm =new Vue({
        el:"#box",
        data:{
            arr:[{xh:'Iphone X',jg:7999,count:1},{xh:'荣耀 10',jg:2399,count:1},{xh:'华为P20',jg:3399,count:1},{xh:'小米 8',jg:3999,count:1}]
        },
        methods:{
            jian:function(index){
                if (this.arr[index].count1) {
                    this.arr[index].count-=1;
                }
            },
            zeng:function(index){
                this.arr[index].count+=1;
            },
            delete1:function(index){
                this.arr.splice(index,1);
            },
            totalPrice:function(item){
                let num=0;
                this.arr.forEach(function(item){
                    num+=item.jg*item.count
                });
                return num;
            }
        }
    });
/script
/html


案例三:学生录入系统

 

!DOCTYPE html
html
head
    titleceshi/title
    script src="/upload/attach/blank.gif" data-echo="vue.js"/script
    style type="text/css"
        ul{
            list-style: none;
        }
    /style
/head
body
div id="box1"
    div
        h3学生录入系统列表/h3
        姓名:input type="text" v-model="userName"/span{{nameTis}}/span/br
        年龄:input type="text" v-model="userAge"/span{{ageTis}}/span/br
        性别:selectoption value="男"男/optionoption value="女"女/option/select/br
        手机:input type="text" v-model="userTelephone"/span{{phoneTis}}/span/br
        button @click="createUser"创建新用户/button
    /div

    /br/br/br/br/br
    div
        table
            tr
                td姓名/td
                td性别/td
                td年龄/td
                td手机/td
                td删除/td
            /tr
            tr v-for="(user,index) in users"
                td{{user.name}}/td
                td{{user.sex}}/td
                td{{user.age}}/td
                td{{user.telephone}}/td
                tdbutton @click="deleteUser(index)"删除/button/td
            /tr
        /table
    /div
/div
/body

script
    var vm =new Vue({
        el:"#box1",
        data:{
            users:[{name:"方君昊",sex:"男",age:20,telephone:"15473124380"},
                   {name:"侨兴宜",sex:"女",age:21,telephone:"15612377521"},
                   {name:"方天择",sex:"男",age:20,telephone:"15521653432"},
                   {name:"存金通",sex:"男",age:20,telephone:"13212246232"}],
        nameTis:'',
        ageTis:'',
        phoneTis:'',
        userName:'',
        userAge:'',
        userSex:'',
        userTelephone:'',
        },
        methods:{
            createUser:function(){
                if (this.userName.length2||this.userName.length6) {
                    this.nameTis="2-6个字";
                }else{
                    this.nameTis='';
                }

                if (parseInt(this.userAge)=0||parseInt(this.userAge)150) {
                    this.ageTis="年龄必须大于0或则小于150岁"
                }else{
                    this.ageTis='';
                }

                if (this.userTelephone.length!=11) {
                    this.phoneTis="请输入正确的手机号码"
                }else{
                    this.phoneTis='';
                }

                if (this.nameTis==''this.ageTis==''this.phoneTis=='') {
                    this.users.push({name:this.userName,sex:this.userSex,age:parseInt(this.userAge),telephone:this.userTelephone});
                }
            },
            deleteUser:function(index){
                this.users.splice(index,1);
            }
        }
    });
/script
/html

!DOCTYPE html
html
head
    titleceshi/title
    script src="/upload/attach/blank.gif" data-echo="vue.js"/script
    style type="text/css"
        ul{
            list-style: none;
        }
    /style
/head
body
div id="box1"
    div
        h3学生录入系统列表/h3
        姓名:input type="text" v-model="userName"/span{{nameTis}}/span/br
        年龄:input type="text" v-model="userAge"/span{{ageTis}}/span/br
        性别:selectoption value="男"男/optionoption value="女"女/option/select/br
        手机:input type="text" v-model="userTelephone"/span{{phoneTis}}/span/br
        button @click="createUser"创建新用户/button
    /div

    /br/br/br/br/br
    div
        table
            tr
                td姓名/td
                td性别/td
                td年龄/td
                td手机/td
                td删除/td
            /tr
            tr v-for="(user,index) in users"
                td{{user.name}}/td
                td{{user.sex}}/td
                td{{user.age}}/td
                td{{user.telephone}}/td
                tdbutton @click="deleteUser(index)"删除/button/td
            /tr
        /table
    /div
/div
/body

script
    var vm =new Vue({
        el:"#box1",
        data:{
            users:[{name:"方君昊",sex:"男",age:20,telephone:"15473124380"},
                   {name:"侨兴宜",sex:"女",age:21,telephone:"15612377521"},
                   {name:"方天择",sex:"男",age:20,telephone:"15521653432"},
                   {name:"存金通",sex:"男",age:20,telephone:"13212246232"}],
        nameTis:'',
        ageTis:'',
        phoneTis:'',
        userName:'',
        userAge:'',
        userSex:'',
        userTelephone:'',
        },
        methods:{
            createUser:function(){
                if (this.userName.length2||this.userName.length6) {
                    this.nameTis="2-6个字";
                }else{
                    this.nameTis='';
                }

                if (parseInt(this.userAge)=0||parseInt(this.userAge)150) {
                    this.ageTis="年龄必须大于0或则小于150岁"
                }else{
                    this.ageTis='';
                }

                if (this.userTelephone.length!=11) {
                    this.phoneTis="请输入正确的手机号码"
                }else{
                    this.phoneTis='';
                }

                if (this.nameTis==''this.ageTis==''this.phoneTis=='') {
                    this.users.push({name:this.userName,sex:this.userSex,age:parseInt(this.userAge),telephone:this.userTelephone});
                }
            },
            deleteUser:function(index){
                this.users.splice(index,1);
            }
        }
    });
/script
/html

最新回复(0)
/jishutPamuEoHN2CERGgE1mTp2aV3MjH3TSkc25mCyg_3D_3D3730314
8 简首页