vue条件指令可以根据表达式的结果来渲染页面
(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>
(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>
(1)v-show:隐藏用display
(2)v-if:直接销毁标签,只有一次切换显示
(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>
(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>
(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)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()
(1)unshift():前面插入
this.list.unshift('图片')
(2)shift():前面删除
this.list.shift()
this.list.splice(1)//从1位置开始删除(即仅剩第0个元素)
this.list.splice(0,2)//从0开始,删除长度为2以内的所有元素
this.list.splice(0,3,'a','b')//从0开始,删除长度为3以内的所有元素,并用a,b两值替换(替换值可以任意数量)
(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
<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>
<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>
<div id="app">
<input type="text" v-model="username">
<h1>{{username}}</h1>
</div>
<script>
const app = new Vue({
el:'#app',
data:{
username:'默认数据'
},
})
</script>
(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>
参考文档网址:表单输入绑定 — 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>
<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>
(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>
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。