Vue 2020/4/27

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看出,实际做法是不同的。

  1. v-if:当条件为false时,包含v-if指令的元素,根本不会存在在DOM中。
  2. v-show:当条件为false时,包含v-show指令的元素,会给我们的元素添加一个行内样式:display:none。

所以在实际开发时如何选择呢?

  1. 当需要在显示与隐藏之间切片很频繁时,使用v-show。
  2. 当只有一次切换时,使用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>

在这里插入图片描述

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值