2021-08-02 vue笔记-基础(二) 条件渲染,列表渲染,class和style绑定,表单数据

1.v-for实现嵌套遍历

代码:

<div id="app">
    <div v-for="(item,index) in person">
        我叫{{item.name}},我每天上午:
        <!-- 注:item.daily是把item取出来给第二层用 -->
        <div v-for="(val,key) in item.daily">
            {{val.am}}
        </div>
    </div>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            person:[
                {
                    name:"张三",
                    daily:[
                        {am:"睡觉"},
                        {am:"看书"}
                    ]
                },
                {
                    id:2,
                    name:"李四",
                    daily:[
                        {am:"看视频"},
                        {am:"玩游戏"}
                    ]
                },
            ]
        }
    })
</script>

结果:

我叫张三,我每天上午:睡觉看书
我叫李四,我每天上午:看视频玩游戏

2.v-for遍历数组和遍历对象

代码:

<div id="app">
    <div v-for="(item,index) in arr">
        第{{index+1}}名是{{item}}
    </div>
    <div v-for="(value,key,index) in obj">
        第{{index+1}}栏信息:属性名:{{key}},属性值:{{value}}
    </div>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            arr:["张三","李四"],
            obj:{
                name:"王五",
                age:18
            }
        }
    });
</script>>

结果:

第1名是张三
第2名是李四

第1栏信息:属性名:name,属性值:王五
第2栏信息:属性名:age,属性值:18

总结:

v-for的强大之处在于:    
	当遍历数组时,切换数组形态,形参顺序:item,index    
	当遍历对象时,切换对象形态,形参顺序:value,key,index

3.v-show和v-if

用法:
v-if=“判断条件(布尔值)”
v-show=“布尔值”

代码:

<div id="app">
    <div>
        <!-- 实际操作中,不推荐用v-if..v-else -->
        <div v-if="score>=90">优秀</div>
        <div v-if="score>=60&&score<90">及格</div>
        <div v-if="score<60">不及格</div>
    </div>
    <div>
        <div v-show="flag">
            时隐时现
        </div>
        <button type="button" @click="fn">点击隐藏/显示</button>
    </div>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            score:75,
            flag:true
        },
        methods:{
            fn(){
                this.flag=!this.flag
            }
        }
    });
</script>

结果:

1.score为75时输出及格
2.点击按钮选择隐藏或显示标签

4.v-bind绑定样式的五种方法

html

<div id="app">
    <!-- 1.v-bind:class -->
    <!-- 1.1.多个样式 -->
    <div v-bind:class="['yanse','ziti']">class 数组绑定多个class</div>
    <!-- 1.2.数组包含对象绑定 -->
    <div v-bind:class="[{yanse:flag},'ziti']">class 数组包含对象绑定</div>
    <!-- 1.3.数组包含方法绑定 -->
    <div v-bind:class="[biankuangShow(),'ziti']">class 数组包含方法绑定</div>
    <!-- 2.v-bind:style -->
    <!-- 2.1.多个样式 -->
    <div v-bind:style="[ysStyle,ztStyle]">style 数组绑定多个style</div>
    <!-- 2.2.数组包含方法绑定 -->
    <div v-bind:style="[ysStyle,zitiShow()]">style 数组包含方法绑定</div>
</div>

css

.yanse{
    color:yellow;
    background:red;
}
.ziti{
    font-size:20px;
    font-weight:900
}
.styleborder{
    border:5px dotted gold;
}

js

new Vue({
    el:"#app",
    data:{
        // flag:true,
        flag:false,
        ysStyle:{
            color:"orange",
            background:"pink"
        },
        ztStyle:{
            fontSize:"20px",
            fontWeight:"900"
        },
        warning: {
            color: 'orange'
        }
    },
    methods:{
        biankuangShow(){
            return'styleborder'
        },            
        zitiShow(){
            return {
                fontSize:"20px",
                fontWeight:"900"
            }
        }
    }
});

结果

5.单选按钮

<div id="app">
    <input type="radio" name="sex" v-model="sex" value="m"/>男
    <input type="radio" name="sex" v-model="sex" value="f"/>女
</div>
<script>    
    var app = new Vue({
        el: '#app',
        data:{
            sex:'f',//默认选项:女
        }
    })
</script>

6.复选框1

<div id="app">
    <input type="checkbox" v-model="sel"/>单身
    <button type="button" @click="change">改变选择状态</button>
    <button type="button" @click="output">当前选择状态</button>
</div>
<script>    
    var app = new Vue({
        el: '#app',
        data:{
            sel:true
        },
        methods:{
            change(){
                this.sel=!this.sel
            },
            output(){
                if(this.sel) alert("我是单身狗");
                else alert("我不是单身狗")
            }
        }
    })
</script>

7.复选框2

<div id="app">
    <input type="checkbox" value="eat"/>吃饭
    <input type="checkbox" value="sing"/>唱歌
</div>
<script>    
    var app = new Vue({})
</script>

8.vue中的防抖与节流

共同点:降低无效触发的频率,减轻服务器的负担
理解:

防抖:好比上公交车,最后一个人上车后,才发车,而不是上来一个人就发车    
节流:好比是技能冷却,使用技能后,特定时间内不会再次触发代码