文章目录
0.v-if 和v-else
<div id="app">
<h2 v-if="isshow">{{message1}}</h2>
<h2 v-else>{{message2}}</h2>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
message1:"hyh",
message2:"不是hyh",
isshow:true
}
})
</script>
1.v-if和v-show
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<h2 v-if="isshow" id="aaa">{{message1}}</h2>
<h2 v-show="isshow" id="bbb">{{message1}}</h2>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
message1:"hyh",
message2:"不是hyh",
isshow:false
}
})
</script>
结果:为空白页面
从结果看,v-if和v-show的效果一模一样的,但是从DOM中的id看出,实际做法是不同的。
- v-if:当条件为false时,包含v-if指令的元素,根本不会存在在DOM中。
- v-show:当条件为false时,包含v-show指令的元素,会给我们的元素添加一个行内样式:display:none。
所以在实际开发时如何选择呢?
- 当需要在显示与隐藏之间切片很频繁时,使用v-show。
- 当只有一次切换时,使用v-if。
v-for
<div id="app">
<ul>
<li v-for="item in arrays1">{{item}}</li>
</ul>
<!--获取下标值-->
<ul>
<li v-for="(item,index) in arrays1">{{index+1}}.{{item}}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script >
var app=new Vue({
el:"#app",
data:function(){
return {
arrays1:['hyh','cyp','hqq']
}
}
})
</script>
2.filter/map/reduce
const nums=[10,20,30,444,888,666,40]
console.log(nums);
let newNums=nums.filter(function (n) {
return n<100;
})
console.log(newNums);
newNums.map(function (n) {
return n*2;
})
console.log(newNums);
let total=newNums.reduce(function (pre,n) {
return pre+n;
},0)
console.log(total);
3.v-model
vue双向数据流 v-model 只作用于有value属性的元素
> <input v-model="name" v-bind:class="name">
> 双向数据绑定 页面对于input的value改变,能影响内存中name变量
内存js改变name的值,会影响页面重新渲染最新值
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<input type="text" v-model="message1">{{message1}}
</div>
<script>
var app=new Vue({
el:"#app",
data:{
message1:"hyh"
}
})
</script>
无论修改输入框,还是在控制台修改message1,页面上显示的数据永远相同,两者一个发生改变,另一个也会发生改变。
3.1v-model结合radio
radio:单选框(拥有相同name的radio)
<div id="app">
<label for="male">
<input type="radio" id="male" name="sex" value="男" v-model="sex">男
</label>
<label for="female">
<input type="radio" id="female" name="sex" value="女" v-model="sex">女
</label>
<h3>你单选的性别为:{{sex}}</h3>
</div>
3.2v-model结合checkbox
<div id="app">
<label id="agreement">
<input type="checkbox" id="agreement" v-model="isAgree">同意
</label>
<button :disabled="!isAgree">下一步</button>
</div>
勾选同意后,下一步的按钮才能点击。
<div id="app">
<input type="checkbox" value="篮球" v-model="hobbies">篮球
<input type="checkbox" value="唱" v-model="hobbies">唱
<input type="checkbox" value="跳" v-model="hobbies">跳
<h2>{{hobbies}}</h2>
</div>