02 vue3 v-for v-if v-model v-bind v-on 计算属性 监听

v-bind v-for 的使用

v-bind 绑定信息可以简写为 “:” ，作用是绑定已有的数据例如：v-bind:key=“index” :key=“index”

<template> 
    <div>
        <h1>{{msg}}</h1>
    </div>
    <p>绑定对象：{{userinfo.username}}---{{userinfo.age}}</p>
    <p>{{h2}}</p>

    <!--使字符串里的html生效-->
    <p>绑定html：<span v-html="h2"></span></p>

    <!--绑定 mytitle是定义的值-->
    <div v-bind:title="mytitle">绑定熟悉1</div>
    <div :title="mytitle">绑定熟悉2</div>

    <!--绑定静态值 里面的值需要加引号，myhref的值为href表示跳转-->
    <a v-bind:[myHref]="'http://www.baidu.com'">跳转百度</a>
    <br>
    <a :[myHref]="myLink">跳转百度</a>

    <br>
    <ul>
        <!--循环遍历list，vue3以后后面需要带上绑定key唯一性-->
        <li v-for="(item,index) in list1" :key="index">
            {{item}} --- {{index}}
        </li>
    </ul>

    <ul>
        <!--遍历对象-->
        <li v-for="(value, key, index) in userinfo" :key="index">
            {{key}} : {{value}} --- {{index}}
        </li>
    </ul>


</template>


<script>
    export default {
        data() {
            return {
                msg: "你好Vue",
                userinfo: {
                    username: "张三",
                    age: "18"
                },
                h2: "<h2>你好Vue我是html标签</h2>",
                mytitle: "你好Vue",
                myHref: "href",
                myLink: "http://www.baidu.com",
                list1: ["张总", "李总", "王总"],
            }

        }
    }
</script>

<style>
    h1 {
        text-align: center;
        color: #42b983;
    }
</style>

v-if v-else v-show v-on

<div v-if="num == 0">我是0</div>，控制该内容是否显示
v-show="isTrue"，显示数据，默认display：none

v-on:click  @click  事件  v-xx 可以直接从对象里面获取值

注意事项

# v-for 不能和 v-if连在一起使用，可以与v-show一起使用

# 可以通过template来解决v-for和v-if一起使用的情况

        <h4>正在进行</h4>
        <ul>
            <template v-for="(item, index) in dataList" :key="index">
                <li v-if="!item.checked">
                    <!--复选框 当checked为true是表示选中 -->
                    <input type="checkbox" v-model="item.checked"> {{item.title}} ----
                    <button @click="deleteData(index)">删除</button>
                </li>
            </template>

        </ul>

        <h4>已经完成</h4>
        <ul>
            <li v-for="(item, index) in dataList" :key="index" v-show="item.checked">
                <!--复选框 当checked为true是表示选中 -->
                <input type="checkbox" v-model="item.checked"> {{item.title}} ----
                <button @click="deleteData(index)">删除</button>
            </li>
        </ul>

v-model 单选 下拉框 复选

<template>
    <ul>
        <li>姓 名<input type="text" v-model="userInfo.username"/></li>
        <li>年 龄<input type="text" v-model="userInfo.age"/></li>

        <!-- 二选一 name='sex' 表示把这两个input为一组了-->
        <li>性 别：
            <input type="radio" name="sex" id="sex1" value="1" v-model="userInfo.sex"/> <label for="sex1">男</label>
            <input type="radio" name="sex" id="sex2" value="2" v-model="userInfo.sex"/> <label for="sex2">女</label>
        </li>

        <!--下拉框-->
        <li>城市：
            <select v-model="userInfo.city">
                <option v-for="(item, index) in userInfo.cityList" :key="index" :value="item">{{item}}</option>
            </select>
        </li>

        <!--复选框-->
        <li>爱好：
            <span v-for="(item, index) in userInfo.hobby" :key="index">
                <input type="checkbox" :id="'ch_'+index" v-model="item.checked"/>
                <label :for="'ch_'+index">{{item.title}}</label>
            </span>
        </li>

        <li>备注：
            <textarea cols="30" rows="10" v-model="userInfo.mark"></textarea>
        </li>
    </ul>
    <button @click="doSubmit()"> 获取表达信息</button>

    <br>
    <br>
    <!--prep 原样显示信息-->
    <prep>{{userInfo}}</prep>
</template>


<script>
    export default {
        data() {
            return {
                username: "zhangsan",
                userInfo: {
                    username: "zs",
                    age: 18,
                    sex: "1",
                    cityList: ["北京", "上海", "深圳"],
                    city: "上海",
                    hobby: [
                        {
                            "title": "吃饭",
                            "checked": true
                        },
                        {
                            "title": "睡觉",
                            "checked": false
                        },
                        {
                            "title": "写代码",
                            "checked": true
                        },
                    ],
                    mark: ""
                },
            }
        },
        methods: {
            doSubmit() {
                console.log(this.userInfo);
            }
        }
    }
</script>

method

<template>
    <h1>{{msg}}</h1>
    <button @click="setMsg()">设置msg</button>
    <br>
    <button @click="getMsg()">获取msg</button>

    <div class="red"></div>
    <br>
    <div :class="[myClass]" @click="changColor()"></div>
    <br>
    <!--class绑定多个动态属性 可以同时加载样试active和red-->
    <div :class="{'active': isActive, 'red': isRed}">div</div>
    <br>
    <div :style="myStyle">666</div>

</template>

<script>
    export default {
        data() {
            return {
                msg: "你好Vue",
                myClass: "red",
                isActive: true,
                isRed: true,
                myStyle: {
                    backgroundColor: "red",
                    width: "100px",
                    height: "100px"
                }
            }
        },
        methods: {
            setMsg() {
                this.msg = "我是改变后的Msg"
            },
            getMsg() {
                alert(this.msg)
            },

            changColor() {
                this.myClass = this.myClass === "blue" ? "red" : "blue"
            }
        }
    }
</script>

<style>
    .active {
        color: #42b983;
        font-size: large;
    }


    .red {
        background-color: red;
        width: 100px;
        height: 100px;
    }

    .blue {
        background-color: blue;
        width: 100px;
        height: 100px;
    }
    
</style>

Vue里操作document

<template>
    <ul>
        <li><input type="text" id="username"/></li>
        <li><input type="text" ref="age"/></li>
    </ul>
    <button @click="doSubmit()"> 获取表达信息</button>
</template>

<script>
    export default {
        data() {
            return {};
        },
        methods: {
            doSubmit() {
                // 原生js
                var usernameObj = document.querySelector("#username");
                alert(usernameObj.value);

                // 1.定义ref <input type="text" ref="age />
                // 2. this.$refs.名称   (建议使用)
                alert(this.$refs.age.value);
            }
        }
    };
</script>

三元表达式

:class="[msg7==0 ? 'idcard01': msg7==1 ? 'idcard02' : 'idcard03']"

Vue3 中使用JavaScript模板

<template>
    // 计算
    {{a + 1}}   
    <br>
    // 三元表达式
    {{flag ? "this is true": "this is false"}}
    <br>
    // 字符串反转
    {{message.split("").reverse().join("")}}
</template>

<script>
    export default {
        data() {
            return {
                a: 10,
                flag: true,
                message: "hello world"
            }
        }
    }
</script>

v-if v-else-if v-else v-show

v-else元素必须紧跟在带v-if或者v-else-if的元素的后面，否则它将不会被识别。

<template>
    <div>
        <span v-if="flag">显示 v-if</span>
        <span v-show="flag">显示 v-show</span>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                a: 10,
                flag: false,
                message: "hello world"
            }
        }
</script>

v-if 和 v-show的区别

v-if 是dom操作，v-show只是css的显示隐藏，一般来说，v-if 有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好。

计算属性

<template>
    <hr>
    <h3>计算属性</h3>
    <input type="text" v-model="message"/>
    <br>
    <span>{{reverseMsg}}</span>
    <br>
    <button @click="setMsg()">改变msg</button>

    <br>
    <hr>
<!--  实现筛选功能  -->
    <input type="text" v-model="keyword" placeholder="请输入关键词"/>
    <ul>
        <li v-for="(item, index) in searchData" :key="index">{{item}}</li>
    </ul>

</template>

<script>
    export default {
        data() {
            return {
                a: 10,
                flag: false,
                message: "hello world",
                listData: ['apple', 'banana', 'orange', 'pear'],
                keyword: ""
            }
        },
        // 计算属性
        computed: {
            reverseMsg() {
                return this.message.split("").reverse().join("")
            },
            searchData() {
                var temArr = [];
                this.listData.forEach((value) => {
                    // 查找 value里是否有keyword 如果没有的情况就等于-1,不等于-1表示value里面包含keyword
                    if (value.indexOf(this.keyword) != -1  && this.keyword != "") {
                        temArr.push(value);  // list里面添加数据
                    }
                });
                return temArr;
            },
        }
    }
</script>

watch监听数据变化

vue.js 提供了一个方法watch，它用于观察vue实例上的数据变动。当一些数据需要根据其它数据变化时，watch很诱人 – 特别是如果你来自AngularJS。不过，通常更好的办法是使用计算属性而不是一个命令式的watch回调。

<template>
    <h3>监听</h3>
    <input type="text" v-model="firstName" placeholder="请输入firstName">
    <br>
    <input type="text" v-model="lastName" placeholder="请输入lastName">
    <br>
<!-- 通过watch来实现 -->
    {{fullName}}
    <br>
<!-- 通过计算属性来实现  性能更好 推荐-->
    {{fullNameFn}}

</template>

<script>
    export default {
        data() {
            return {
                firstName: "",
                lastName: "",
                fullName: ""
            }
        },
        // 计算属性
        computed: {
            fullNameFn() {
                return this.firstName + " " + this.lastName;
            }
        },
        // 监视
        watch: {
            // 监听firstName，当firstName发生修改时，会把修改后的值传递过来
            firstName: function (value) {
                this.fullName = value + " " + this.lastName
            },
            // 监听lastName
            lastName: function (value) {
                this.fullName = this.firstName + " " + value
            }
        }
    }
</script>