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> 
Vue的基础学习 文章被收录于专栏
Vue的基础语法，组件化开发，CLI，Vue-router，Vuex详解，网络封装，UI框架
比亚迪成长空间 168人发布