vue基础---01条件渲染

时间:2021-09-10
本文章向大家介绍vue基础---01条件渲染，主要包括vue基础---01条件渲染使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

00.vue代码架构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    <!-- 【注意】：MVVM(Model-View- Controller)指：即模型-视图-视图模型；
            【模型】指的是后端传递的数据；
            【视图】指的是所看到的页面；
            【视图模型】mvvm模式的核心，它是连接view和model的桥梁。 -->



    <!-- 表示此div要用vue框架 -->
    <!-- {{}}里面是模板变量 -->
    <div id="app"><!-- 这里就是视图部分VIEW-->
        {{title}}
    </div>

    <script type="text/javascript">
        // 实例化上面的对象
        var app=new Vue({
            // 配置参数
            // el表示在那个元素上使用vue框架
            el:"#app",
            // 下面的data就是模型部分Model；VM相当于vue.js，用于将视图和模型关联起来
            data:{
                title:"hello vue!"
            }
        })
    </script>
</body>
</html>

01.v-if（条件语句）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-if</title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    
    v-if:控制切换一个元素是否显示;
    v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别;
    v-if与v-else之间不能有其他元素


    <div id="app">
        <h1>用户名：{{username}}</h1>
        <h3 v-if="isVip">用户类型：VIP</h3>
        <h3 v-else>用户类型：普通用户</h3>
        <hr/>
        <h1>用户允许登陆时间</h1>
        <h3 v-if="age>24">允许登录12小时</h3>
        <h3 v-else-if="age>12">允许登录8小时</h3>
        <h3 v-else>允许登录4小时</h3>
    </div>
    
<script>
    var app=new Vue({
        el:'#app',
        data:{
            username:"小明",
            isVip:true,
            age:24
        }
    })
</script>
</body>
</html>

02.v-show(条件展示元素)

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-show</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style type="text/css">
    #pana{
        width:100px;
        height:100px;
        background:red;
    }
</style>
</head>
<body>
    <div id="app">
           <div v-show="isShow" id="pana">
               nihao
           </div>
           <button @click="showPana">切换</button>
    </div>
    <script>
          var app=new Vue({
              el:"#app",
              data:{
                  isShow:true
              },
              methods:{//方法
                  showPana:function(){
                      app.isShow=!app.isShow;
                  }
              }
          })
    </script>
</body>
</html>
<!--v-show:简单地切换元素的cssdiaplay属性-->
v-show与v-if的区别:
    v-if:不显示时，第一次就直接不渲染，如果时内容已经显示将其改为不显示，将内容直接从Dom去除
    v-show:不显时，就会改为display:none,但是会渲染在Dom上,反复需要切换的内容，使用v-show

原文地址：https://www.cnblogs.com/hunter1/p/15250610.html

随机文章
Javascript知识点必读
最近更新