Vue：条件渲染

V-show（使用频繁切换）

点击查看代码 
<!DOCTYPE html>
<html lang="en" xmlns:>
<head>
  <meta charset="UTF-8">
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="js/vue.js"></script>
  <title>Title</title>

</head>
<body>
<div id="firstVue">
   <h1>条件渲染</h1>
   <h1>V-show</h1>
  <!--能放属性-->
  <h2 v-show="x">是</h2>
  <!--能放表达式-->
  <h2 v-show="x==false">sss</h2>
  
</div>
</body>
<script type="text/javascript">
  //关闭生成提示
  Vue.config.productionTip=false;

  let v=new Vue({
    el:"#firstVue",
    data:{
       firstname:"张",
       x:true
    }
  })
  console.log(v)
</script >
</html>

V-if（直接干掉）

点击查看代码 
<!DOCTYPE html>
<html lang="en" xmlns:>
<head>
  <meta charset="UTF-8">
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="js/vue.js"></script>
  <title>Title</title>

</head>
<body>
<div id="firstVue">
   <h1>条件渲染</h1>
   <h1>V-if</h1>
  <button @click="add">加一</button>
  <h2 v-if="x==1">是</h2>
  <h2 v-if="x==2">sss</h2>
  <h2 v-if="x==3">ns</h2>
</div>
</body>
<script type="text/javascript">
  //关闭生成提示
  Vue.config.productionTip=false;

  let v=new Vue({
    el:"#firstVue",
    data:{
       firstname:"张",
       x:0
    },
    methods:{
      add(){
        this.x++;
      }
    }
  })
  console.log(v)
</script >
</html>
posted @ 2021-11-08 17:30  旅祸少年  阅读(54)  评论(0)    收藏  举报