v-if、v-show、v-for

最新推荐文章于 2024-02-19 14:54:25 发布

soputasmile11

最新推荐文章于 2024-02-19 14:54:25 发布

阅读量167

点赞数

分类专栏： vue 文章标签： html javascript

本文链接：https://blog.csdn.net/u014473112/article/details/120622372

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

参考文档：https://cn.vuejs.org/v2/guide/conditional.html

以下是要着重记忆的点：

1、v-else-if

其实这个指令使用情况比较少，如果确实有多个判断的情况建议把逻辑写到js里面，不要写到html中，比如下面的例子：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script src="../lib/vue.js"></script>
<div id="app">
<h1>{{result}}</h1>
 <span v-if="score<60">不及格</span>
 <span v-else-if="score<=80">一般</span>
 <span v-else-if="score<90">良好</span>
 <span v-else="90=<score">优秀</span>

</div>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      score: 90
    },
    computed: {
      result() {
        let showMessage= ''
        if (60>this.score) {
          showMessage = '不及格'
        }else if (this.score <= 80) {
          showMessage = '一般'
        } else if (this.score < 90) {
          showMessage = '满意'
        } else {
          showMessage = '优秀'
        }
        return showMessage
      }
    }
  })
</script>

</body>
</html>

用computed计算一个变量出来展示，html看起来更优雅

2、使用key管理重复元素

看下面这段代码

<p id="app">
  <button @click="changeLoginType">切换登录方式</button>
  <template v-if="loginType === 'username'">
    <label>Username</label>
    <input placeholder="Enter your username" >
  </template>
  <template v-else>
    <label>Email</label>
    <input placeholder="Enter your email address">
  </template>
</p>

如果登录方式是username，输入一些信息，点击切换登录方式的时候，输入框的内容不会消失，这是因为vue为了更高效没有重新渲染，可以使用key进行标识：

<p id="app">
  <button @click="changeLoginType">切换登录方式</button>
  <template v-if="loginType === 'username'">
    <label>Username</label>
    <input placeholder="Enter your username" key="username-input">  <!---添加key标识->
  </template>
  <template v-else>
    <label>Email</label>
    <input placeholder="Enter your email address" key="email-input"><!---添加key标识->
  </template>
</p>

3、v-for和v-if不要同时使用在一个标签上

因为v-for的优先级高于v-if，如果同时使用，数组所有元素会全部在html中遍历渲染，然后再执行v-if判断是否要删除一些元素，这样会造成资源的浪费

4、v-show和v-if区别

（1）v-show是在元素上设置了display的属性是否为none，v-if是删除渲染元素频繁切换，比较消耗性能，所以如果是频繁切换是否暂时的场景，最好用v-show
（2）v-show不支持template，也不支持v-else

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script src="../lib/vue.js"></script>
<div id="app">
  <button @click="change">展示与否</button>
  <template v-show="isShow">
    <span>test</span>
  </template>
</div>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      isShow: true
    },
    methods: {
      change: function(){
        this.isShow = !this.isShow
      }
    }
  })
</script>

</body>
</html>

这里template使用v-show会失效，改成v-if就可以成功

soputasmile11

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v-if、v-show、v-for

参考文档：https://cn.vuejs.org/v2/guide/conditional.html以下是要着重记忆的点：1、v-else-if其实这个指令使用情况比较少，如果确实有多个判断的情况建议把逻辑写到js里面，不要写到html中，比如下面的例子：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title>
复制链接

扫一扫