vue学习记录--v-if与v-show

小白初学习,如果不当,请多见谅!

v-if:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02-条件渲染title>
    <script src="../js/vue.js" type="text/javascript" charset="UTF-8">script>
head>
<body>
    
<h1>用户名:{{username}}h1>

用户类型: VIPh2> <h3 v-else>用户类型:普通用户h3> <h2>允许用户登录的时间:h2> <h3 v-if="age >18">允许登录24小时h3>

允许登录8小时h3> <h3 v-else>允许登录4小时h3> div> <script type="text/javascript"> let app = new Vue({ el: "#app", data:{ username: "小秘", isVip: false, // isVip: true age: 24 } }) script> body> html>

vue学习记录--v-if与v-show_第1张图片

v-show


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02-v-showtitle>
    <script src="../js/vue.js" type="text/javascript" charset="UTF-8">script>
head>
<body>
hello vue! div>

页面内容不显示时:
vue学习记录--v-if与v-show_第2张图片
页面内容显示时:
vue学习记录--v-if与v-show_第3张图片
通过对比,可以发现:

v-if: 不显示时:第一次就不会渲染,如果内容已显示需要修改为不显示时,内容会从dom上去除 如果页面内容只是显示一次,建议使用v-if
v-show: 不显示时,就会改为display:none 但是会渲染在dom上 如果需要反复需要切换内容,建议使用v-show

你可能感兴趣的:(vue学习笔记)