vue 渲染函数处理slot_vue 渲染函数

最新推荐文章于 2023-04-21 15:15:27 发布

马斯科蛙的彼得

最新推荐文章于 2023-04-21 15:15:27 发布

阅读量202

点赞数

文章标签： vue 渲染函数处理slot

本文链接：https://blog.csdn.net/weixin_31584817/article/details/112173226

版权

使用方法

v-if ：

<h1 v-if="xkd">侠课岛</h1>

template 中配合 v-if 条件渲染一整组：

<template v-if="a">
	<h1>Title</h1>
	<p>Paragraph one</p>
	<p>Paragraph two</p>
</template>

使用v-else 指令来表示 v-if 的 else，v-else 元素必须紧跟在 v-if 或者 v-else-if元素的后面，否则它将不会被识别：

<h1 v-if="a">True</h1>
<h1 v-else>FALSE</h1>

多次使用 v-if ：

<h1 v-if="color == 'red'" style="color: red;">红</h1>
<h1 v-else-if="color == 'green'" style="color: green;">绿</h1>
<h1 v-else="color == 'blue'" style="color: blue;">蓝 </h1>

如图所示：

key 管理可复用的元素

通常会复用已有元素而不是从头开始渲染（就近原则），key使得Vue渲染速度会变得非常快。

下面是key的使用方法：

<body>
  <div id="main">
    <template v-if="loginType === 'username'">
      <label>用户名</label>
      <input placeholder="请输入用户名" key="username-input" />
    </template>
    <template v-else>
      <label>邮箱</label>
      <input placeholder="请输入邮箱" key="email-input" />
    </template>
    <input type="button" value="切换" v-on:click="changeType" />

  </div>
</body>

<script>
  var vm = new Vue({
    el: '#main',
    data: {
      'loginType': 'username'
    },
    methods: {
      changeType: function() {
        if (this.loginType == 'username') {
          this.loginType = 'email';
        } else {
          this.loginType = 'username';
        }
      }
    }
  })
</script>

v-show vs v-if

v-show：

<h1 v-show="xkd">Hello!</h1>

v-show：比较简单，不管初始条件是什么，元素总是会被渲染，并且只是简单的基于CSS进行变换。初始渲染开销较大。

v-if：有更高的切换开销。

如果需要非常频繁的切换，那么使用v-show比较好；如果在运行条件不太可能改变的情况下，则使用v-if较好。

马斯科蛙的彼得

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 渲染函数处理slot_vue 渲染函数

使用方法v-if ：<h1 v-if="xkd">侠课岛</h1>template 中配合 v-if 条件渲染一整组：<template v-if="a"> <h1>Title</h1> <p>Paragraph one</p> <p>Paragraph two</p></t...
复制链接

扫一扫