vue基础---01条件渲染

2021-09-10 11:32:57 阅读：83 来源： 互联网

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

标签：el,vue,show,app,元素,---,01,data
来源： https://www.cnblogs.com/hunter1/p/15250610.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue基础---01条件渲染