申小兮

2022-10-15 23:19 福州理工学院 Web前端发布于福建

关注

Vue基础语法（二）

一、条件判断

1、概念

vue条件指令可以根据表达式的结果来渲染页面

2、v-if、v-else-if、v-else

（1）其后面的表达式为true，就会显示对应元素或组件

（2）相同的东西，只需要出现一个，即只会渲染一个标签

<div id="app">
    <h1 v-if="score>=90">优秀</h1>
    <h1 v-else-if="score>=60">及格</h1>
    <h1 v-else="score<60">不及格</h1>
</div>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            score:50,
        },
    })
</script>

3、v-show

（1）实现元素隐藏，未出现的就是加上了display: none;属性

<div id="app">
    <h1 v-show="score>=90">优秀</h1>
    <h1 v-show="score>=60&&score<90">及格</h1>
    <h1 v-show="score<60">不及格</h1>
</div>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            score:50,
        },
    })
</script>

（2）v-show也可以通过true，false控制标签的显示隐藏

<style>
    .box{
        width: 200px;
        height: 200px;
        background-color: aqua;
    }
</style>

<div id="app">
    <div class="box" v-show="isShow"></div>
</div>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            isShow:false,
        },
    })
</script>

4、v-show与v-if的异同

（1）v-show：隐藏用display

（2）v-if：直接销毁标签，只有一次切换显示

二、v-for

1、遍历数组

（1）格式：<标签 v-for='(item,index) in 数组名'>{{item}}</标签>

①item：值

②index：下标

（2）代码例子

<div id="app">
    <ul>
        <li v-for="(item,index) in list">{{item}}</li>
    </ul>
</div>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            list:['新闻','hao123','地图','贴吧'],
        },
    })
</script>

2、遍历对象（比较少用）

（1）格式：<标签 v-for='(value,item) in 对象名'>{{value}}:{{item}}</标签>

①value：属性值

②item：属性名

（2）代码例子

<div id="app">
    <div v-for="(item,value) in user">{{value}}:{{item}}</div>
</div>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            user:{
                name:'申小兮',
                age:18,
            },
        },
    })
</script>

3、key属性

（1）官方推荐使用v-for时，给元素加上key属性，每一次循环都要有

（2）原则上key不能重复，并且不建议使使用index作为key

（3）后台数据返回，每一条数据都有自己的key

<div id="app">
    <div v-for="item in userData" :key="item.id">{{item.name}}</div>
</div>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            userData:[
                {
                    id:1,
                    name:'申小兮',
                },
                {
                    id:2,
                    name:'林小兮',
                },
            ],
        },
    })
</script>

三、数据更新检测

数组的更新需要用vue提供的方法才可以自动更新页面，以往的方法无效

1、末尾的添加、删除

（1）push()：末尾的添加

<div id="app">
    <li v-for="item in list">{{item}}</li>
    <button @click="change">修改</button>
</div>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            list:['新闻','hao123','地图','贴吧','视频'],
        },
        methods:{
            change(){
                this.list.push('图片')
            }
        },
    })
</script>

（2）pop()：末尾的删除

this.list.pop()

2、前面的插入、删除

（1）unshift()：前面插入

this.list.unshift('图片')

（2）shift()：前面删除

this.list.shift()

3、splice(index,length,替换内容)：删除选中内容

this.list.splice(1)//从1位置开始删除（即仅剩第0个元素）
this.list.splice(0,2)//从0开始，删除长度为2以内的所有元素
this.list.splice(0,3,'a','b')//从0开始，删除长度为3以内的所有元素，并用a，b两值替换（替换值可以任意数量）

4、sort()排序

（1）升序

<div id="app">
    <li v-for="item in numArr">{{item}}</li>
    <button @click="change">修改</button>
</div>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            numArr:[23,7890,1,456]
        },
        methods:{
            change(){
                this.numArr.sort(function(a,b){
                    return a - b
                })
            }
        },
    })
</script>

（2）降序

return b - a

5、反转：reverse()

<div id="app">
    <li v-for="item in list">{{item}}</li>
    <button @click="change">修改</button>
</div>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            list:['新闻','hao123','地图','贴吧','视频'],
        },
        methods:{
            change(){
                this.list.reverse()
            }
        },
    })
</script>

6、this.$set(要修改的对象,索引值,修改后)

<div id="app">
    <li v-for="item in list">{{item}}</li>
    <button @click="change">修改</button>
</div>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            list:['新闻','hao123','地图','贴吧','视频'],
        },
        methods:{
            change(){
                this.list[2]='222'//普通修改无效
                this.$set(this.list,2,4787)
            }
        },
    })
</script>

四、表单绑定

1、v-model的双向绑定

<div id="app">
    <input type="text" v-model="username">
    <h1>{{username}}</h1>
</div>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            username:'默认数据'
        },
    })
</script>

2、v-model原理

（1）输入框的input事件

（2）代码例子

<div id="app">
    <input type="text" :value="username" @input="getValue($event)">
    <h1>{{username}}</h1>
</div>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            username:'默认数据'
        },
        methods:{
            getValue(e){
                console.log(e.target.value);
                this.username = e.target.value
            }
        }
    })
</script>

3、单选、多选

参考文档网址：表单输入绑定 — Vue.js (vuejs.org)

（1）单选：input绑定的value值不会影响v-model绑定的属性值

<div id="app">
    男<input type="radio" v-model="sex" value="man">
    女<input type="radio" v-model="sex" value="woman">
    <p>{{sex}}</p>
</div>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            sex:'',
        },
    })
</script>

（2）多选

①仅一个选择时：v-model绑定值是一个布尔值

<div id="app">
    是否购买<input type="checkbox" v-model="isBuy">
    <p>{{isBuy}}</p>
</div>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            isBuy:false
        },
    })
</script>

②多个选择时：选中的元素会添加在数组中

<div id="app">
    运动<input type="checkbox" v-model="hobby" value="1">
    学习<input type="checkbox" v-model="hobby" value="2">
    <p>{{hobby}}</p>
</div>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            hobby:[],
        },
    })
</script>

4、v-model的下拉框

<div id="app">
    <select name="" id="" v-model="city">
        <option value="1">北京</option>
        <option value="2">上海</option>
        <option value="3">天津</option>
        <option value="4">重庆</option>
    </select>
</div>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            city:'3',//默认值是天津，下标为3
        },
    })
</script>

5、v-model修饰符

（1）number：将用户输入值转换成数值类型，输入类型需要是数字

<div id="app">
    <input type="text" v-model.number="username">
    <p>{{typeof username}}</p>
</div>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            username:'',
        },
    })
</script>

（2）lazy：光标离开输入框或按enter时，输入框数据才会更新

<div id="app">
    <input type="text" v-model.lazy="username">
    {{username}}
</div>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            username:'',
        },
    })
</script>

（3）trim：去掉首位空白（输入字符串时）

<div id="app">
    <input type="text" v-model.trim="username">
    {{username.length}}
</div>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            username:'',
        },
    })
</script>