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>