Vue-条件判断与循环遍历

条件判断

v-if的使用

<div id="app">
  <h1 v-if="scope>20">{{message}}</h1>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'hello',
      scope: 90
    }
  })
</script>

v-if、v-else if、v-else 的结合使用

<div id="app">
  <h2 v-if="scope>=80">优秀</h2>
  <h2 v-else-if="scope>=60">及格</h2>
  <h2 v-else>不及格</h2>

  <h1>{{checkScope}}</h1>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'hello',
      scope: 60
    },
    computed: {
      checkScope() {
        let result = '';
        if(this.scope >= 80){
          result = '优秀'
        }else if(this.scope >= 60){
          result = '及格'
        }else{
          result = '不及格'
        }
        return result
      }
    }
  })
</script>

用户登录切换的小案例

<div id="app">
  <!--  <label for="input1">{{message}}</label>-->
  <!--  <input type="text" id="input1" :placeholder="message">-->
  <!--  <button @click="change">点击切换</button>-->

  <span v-if="input">
     <label  for="input">账号登录</label>
    <input id="input" type="text" placeholder="请输入账号" key="abc">
  </span>
  <span v-else>
     <label  for="input1">手机号登录</label>
     <input  id="input1" type="text" placeholder="请输入手机号" key="ab">
  </span>

  <button @click="input = !input">点击切换</button>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '账号登录',
      input: true
    },
    methods: {
      change() {
        if (this.message === '账号登录') {
          this.message = '手机号登录'
        } else {
          this.message = '账号登录'
        }
      }
    }
  })
</script>

v-show的使用

<div id="app">
  <!--如果isShow为false，彻底没有-->
  <h2 id="aaa" v-if="isShow">{{message}}</h2>
  <!--如果isShow为false，则隐藏-->
  <h2 id="bbb" v-show="isShow">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'hello',
      isShow: true
    }
  })
</script>

循环遍历

<div id="app">
  <!--遍历数组-->
  <ul>
    <li v-for="(item,index) in movies">{{index+1}}---{{item}}</li>
  </ul>
  <!--遍历对象-->
  <ul>
    <li v-for="(value,key,index) in obj">{{value}}----{{key}}----{{index}}</li>
  </ul>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'hello',
      movies: ['深入计算机原理','java编程入门','web开发实战'],
      obj:{
        age: 12,
        name: '詹三',
        address: '北京'
      }
    }
  })
</script>