7. vue常用指令 v-show 指定渲染后的元素是否展示

v-show=“true” 展示元素

v-show=“false” 隐藏元素

无论展示还是隐藏,元素都存在于页面上

v-if 渲染或者不渲染元素


<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue的基本使用title>
  
  <script src="js/vue.js">script>
  
  
head>
<body>
  <div id="app">
    <ul>
      <li>名字: {{name}}li>
      <li>年龄: {{age}}li>
      <li v-show="age<18">{{name}}是未成年人li>
      <li v-show="age>=18">{{name}}是成年人li>
    ul>
  div>
  
  <script>
    //步骤2 创建vue实例对象
    let vue = new Vue({
      //步骤3 指定vue对象控制的HTML区域
      el: "#app",
      //步骤4 指定vue对象控制的HTML区域的数据
      data: {
        name: "lchh",
        age: 18,
      },
    });
  script>

body>
html>

7. vue常用指令 v-show 指定渲染后的元素是否展示_第1张图片
然后看下 html页面
7. vue常用指令 v-show 指定渲染后的元素是否展示_第2张图片
两个

  • 都是已经渲染到页面上去了

  • 你可能感兴趣的:(Vue,vue)