Vue 框架学习(四) 条件判断

1、if,else:

<body>
  <div id ="app">

    <!-- 复杂判断还是推荐使用computed计算 -->
    <h2 v-if="score >= 90">
      <div>优秀</div>
    </h2>
    <h2 v-else-if="score >= 60">
      <div>良好</div>
    </h2>
    <h2 v-else>
      <div>不及格</div>
    </h2>

    {{message}}
  </div>

  <script>
    //创建Vue实例,得到 ViewModel
    const vm = new Vue({
      el: '#app',
      data: {
        message: 'Smallstars',
        isShow: true,
        score: 95
      },
      methods: {},
      computed: {},
    });
  </script>

</body>

 

2、条件渲染：

<body>
  <div id ="app">
    <!-- 如果没有用key标识，会复用输入框，内容不会清空，key值设置需不同才行 -->
    <span v-if="isUser">
      <label for="username">用户账户</label>
      <input type="text" id="username" placeholder="用户账户" key="username">
    </span>
    <span v-else="">
      <label for="email">用户邮箱</label>
      <input type="text" id="email" placeholder="用户邮箱" key="emil">
    </span>
    <button @click="isUser = !isUser">切换类型</button>
  </div>

  <script>
    //创建Vue实例,得到 ViewModel
    const vm = new Vue({
      el: '#app',
      data: {
        message: 'Smallstars',
        isUser: true
      },
      methods: {},
      computed: {},
    });
  </script>

</body>

 

2、v-show: 多次隐藏使用

<body>
  <div id ="app">
    <!-- 
    v-if: 当条件为 false 对应元素根本不存在dom中
    v-show: 当条件为 false 只是隐藏，内样式改为: display: none
     -->
    <h2 v-if="isShow" id="a1">{{message}}</h2>
    <h2 v-show="isShow" id="a2">{{message}}</h2>    
  </div>

  <script>
    //创建Vue实例,得到 ViewModel
    const vm = new Vue({
      el: '#app',
      data: {
        message: 'Smallstars',
        isShow: true
      },
      methods: {},
      computed: {},
    });
  </script>

</body>

 

 

3、响应函数和不响应操作

<body>
  <div id ="app">
    <ul>
      <li v-for="value in letters">{{value}}</li>
    </ul>

    <button @click="btnClick">按钮</button>
  </div>

  <script>
    //创建Vue实例,得到 ViewModel
    const vm = new Vue({
      el: '#app',
      data: {
        letters: ['a', 'c', 'b', 'd']
      },
      methods: {
        btnClick(){
          //1、在最后添加元素
          // this.letters.push('s')

          //2、在前面添加元素
          // this.letters.unshift('s')

          //3、在最后删除元素
          // this.letters.pop()

          //4、在最前面删除元素
          // this.letters.shift()

          // 5、排序
          // this.letters.sort()

          // 6、反转
          // this.letters.reverse()

          // 7、splice
          // 删除元素：(start, length)
          // 替换元素：(start, length, values)
          // 插入元素：(start, 0, values)
          // this.letters.splice(1, 2)
          // this.letters.splice(1, 2, 'e', 'f')
          // this.letters.splice(1, 0, 'e', 'f')

          // 非响应式:不会刷新，但是在Console中可以查看到值已经改变
          // this.letters[0] = 'h'

          // 可以用以下两种方式达到上式响应式的功能
          // this.letters.splice(1, 1, 'h')
          // set(object, index, value)
          // Vue.set(this.letters, 1, 'h')
        }
      },
      computed: {},
    });
  </script>

</body>

 

posted @ 2020-06-25 21:13  北冥雪  阅读(553)  评论(0)  编辑  收藏  举报