11、认识条件渲染与列表渲染

终是痴情负了空

于 2022-09-03 14:08:54 发布

阅读量285

点赞数

分类专栏： vue基础文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_51092575/article/details/126462252

版权

一、条件渲染:

1.v-if
写法:
(1).v-if="表达式”
(2).v-else-if="表达式”
(3).v-else=“表达式”

适用于:切换频率较低的场景。
特点:不展示的DOM元素直接被移除.
注意: v-if可以和:v-else-if、v-else起使用，但要求结构不能被"打断”。

2.v- show
写法: V-show="表达式”

适用于:切换频率较高的场景。
特点:不展示的DOM元素未被移除。仪仪是使用样式隐藏掉

3.备注:
使用-if的时，元素可能无法获取到，面使用v-show -定可以获取到。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../../js/vue.js"></script>
  <style>

  </style>
</head>
<body>
<div id="root">
<!--  使用v-show进行条件渲染-->
<!--  <h2 v-show="false">欢迎来{
  {name}}</h2>-->
  <hr>
  <!--  使用v-if进行条件渲染-->
<!--