VUE第三天学习

表单处理

单选v-model直接绑定布尔值
多选v_model绑定数组
唯一选择 v-model绑定字符串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./vue.js"></script>
<body>
    <div id="box">
        <input type="checkbox" v-model='checkGroup' value="swim"> 游泳
        <input type="checkbox" v-model='checkGroup' value="run"> 长跑
        <input type="checkbox" v-model='checkGroup' value="jump"> 调高
        <input type="checkbox" v-model='checkGroup' value="swim2"> 游泳
        {{checkGroup}}

        <p>最喜欢的运动</p>
        <input type="radio" v-model='checkOne' value="swim"> 游泳
        <input type="radio" v-model='checkOne' value="run"> 长跑
        <input type="radio" v-model='checkOne' value="jump"> 调高
        <input type="radio" v-model='checkOne' value="swim2"> 游泳
        {{checkOne}}
    </div>
</body>
<script>
    let vue = new Vue({
        el:'#box',
        data:{
            isChecked:false,
            checkGroup:[],
            checkOne:""
        }
    })    
</script>
</html>

购物车案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="vue.js"></script>
<body>
    <div class="box">
        <div>
            <input type="checkbox" @change="handleChange" v-model='allCheck'>全选
            <li v-for="data in datalist">
                <input type="checkbox" v-model="shopGroup" :value="data">{{data.name}}--{{data.number}}
                <button @click="shopAdd(data.id)">+</button>
                <button @click="shopReduce(data.id)">-</button>
            </li>
            {{shopGroup}}
            <p>总金额:{{ getSum() }}</p>
        </div>
    </div>
</body>
<script>
    let vue = new Vue({
        el:'.box',
        data:{
            allCheck:false,
            shopGroup:[],
            datalist:[
                {
                    id:1,
                    name:"商品",
                    cost:22,
                    number:1,
                    
                },
                {
                    id:2,
                    name:"商品",
                    cost:22,
                    number:1,
                    
                },
                {
                    id:3,
                    name:"商品",
                    cost:22,
                    number:1,
                    
                },
            ]

        },
        methods:{
            getSum(){
                // 状态改变，调用状态的函数会自动调用
                let sum=0;
                this.shopGroup.map(shop=>{
                    sum += shop.cost * shop.number
                })
                return sum
            },
            handleChange(){
                // console.log(this.all)
                if(this.shopGroup.length === t)
                if(this.allCheck){
                    this.datalist.map(data=>{
                        this.shopGroup.push(data)
                    })
                }else{
                    this.shopGroup=[]
                }
            },
            shopAdd(id){
                // console.log(id)
                this.datalist.map(data=>{
                    if(data.id === id){
                        data.number++
                    }
                })
            },
            shopReduce(id){
                console.log(id)
                this.datalist.map(data=>{
                    if(data.id === id){
                        data.number--
                        if(data.number < 0){
                            data.number=0
                        }
                    }
                })
            }

        }
    })
</script>
</html>

在这里插入图片描述

VUE表单修饰符

.lazy
.number
.trim

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="vue.js"></script>
<body>
    <div class="box">
        <input type="text" v-model.lazy="mytext">
        {{mytext}}
    </div>
</body>
<script>
    let vue = new Vue({
        el:'.box',
        data:{
            mytext:''
        }
    })
</script>
</html>

VUE计算属性

计算属性为了简化VUE模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src='vue.js'></script>
<body>
    <div id="box">
        <p>计算属性:{{getName}}</p>
    </div>
</body>
<script>
    let vue = new Vue({
        el:'#box',
        data:{
            myname:"xiaoming"
        },
        computed:{
            getName(){
                return this.myname.substring(0,1).toUpperCase()
            }
        }
    })

</script>
</html>

用计算属性来修改模糊查询

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./vue.js"></script>
<body>
    <div class="box">
        <div>
            <input type="text" v-model="mymodel" @input='handelfunc()'>
            <li v-for="data in handelData">{{data}}</li>
        </div>

        <a href="http://www.baidu.com" @click.prevent="handelChange()">baidu</a>
    </div>
</body>
<script>
    let vue = new Vue({
        el:'.box',
        data:{
            mymodel:'',
            datalist:['aaa','bbb','ccc']
        },
        methods:{
            // handelfunc(){
            //     // console.log(this.mymodel)
            //     let re_datalist = this.datalist.filter(item=>item.indexOf(this.mymodel)>-1)
            //     console.log(re_datalist)
            //     this.datalist = re_datalist;
            // },
            handelChange(){
                console.log("www.baidu.com")
            }
        },
        computed:{
            handelData(){
                // let re_datalist =
                // this.datalist = re_datalist;
                return  this.datalist.filter(item=>item.indexOf(this.mymodel)>-1)
            }
        }
    })
</script>
</html>