• VUE学习笔记--模板渲染


    当我们获取到后台数据之后,会按照一定的规则加载到前端写好的模板中,显示在浏览 器中,这个过程称之为渲染。
    
    条件渲染
    1. v-if、v-else 和 v-else-if 
    <!DOCTYPE html>
    <html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <meta charset="utf-8"/>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
    <div id="app" >
        <!--if、else、指令-->
        <p v-if="status==1">当status为1时,显示该行</p>
        <p v-else-if="status==2">当status为2时,显示该行</p>
        <p v-else-if="status==3">当status为3时,显示该行</p>
        <p v-else>否则显示该行</p>
    </div>
    <!--script脚本-->
    <script>
        //创建vue实例
        var  vm=new Vue({
            el: '#app',
            data: {
                status: 2
            }
        });
    </script>
    </body>
    </html>
    我们需要注意多个 v-if、v-else-if 和 v-else 之间需要紧挨着
    2. v-show 实际上同 v-if 效果等同,当绑定事件的元素符合引号中的条件时,该元素才显示,代码 如下
    <div id="app" > <!--if、else、指令--> 
    <p v-show="status==1">当 status 为 1 时,显示该行</p>
     <p v-show="status==2">当 status 为 2 时,显示该行</p>
     </div>
    <script>
                  //创建 vue 实例 
                  var vm=new Vue({  
                        el: '#app',
                        data: {  
                           status: 2 
                    }  
             }); 
    </script>
    3. v-if 和 v-show 的区别
     控制显示的方法不同:v-show 实际是通过修改 DOM 元素 的 display 属性来实现节点的显示和隐藏的,而 v-if 则是通过添加/删除 DOM 节点来实现的.
    编译条件:v-if 是惰性的,只有在条件第一次变为真时才开始局部编译; v-show 是在不管初始条件是什么,都被编译, 然后被缓存,
    性能消耗:v-if 有更高的切换消耗;v-show 有更高的初始渲染消耗;
    使用场景:如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时 条件很少改变,当只需要一次显示或隐藏,则使用 v-if 较好。
    Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染
    <!DOCTYPE html>
    <html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <meta charset="utf-8"/>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
    <div id="app" >
        <p v-if="ok">
            <label>Username</label>
            <input placeholder="Enter your username">
        </p>
        <p v-else>
            <label>Email</label>
            <input placeholder="Enter your email address">
        </p>
        <button @click="ok=!ok">切换</button>
    </div>
    <script type="text/javascript">
        var vm=new Vue({
            el: '#app',
            data: {
                ok: true,
            }
        })
    </script>
    </body>
    </html>
    页面中输入信息后点击切换按钮时,文本框里的内容并没有清空。
     Vue 为我们提供了一种方式来声明“这两个元素是完全独立的—不要复用它们”。只 需添加一个具有唯一值的 key 属性即可,代码如下:
    <div id="app" >
            <p v-if="ok">
                      <label>Username</label> 
                      <input placeholder="Enter your username"key="username-input">
            </p> 
           <p v-else>
                       <label>Email</label>
                       <input placeholder="Enter your email address" key="email-input">
            </p> 
            <button @click="ok=!ok">切换</button> 
    </div>
    列表渲染
    1.v-for 循环用于数组
    v-for 指令根据一组数组的选项列表进行渲染。
    
    对数组选项进行列表渲染
    
    <!DOCTYPE html>
    <html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <meta charset="utf-8"/>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
    <ul id="app">
        <li v-for="item in items">
            {{ item.name }}
        </li>
    </ul>
    <script type="text/javascript">
        var vm= new Vue({
            el: '#app',
            data: {
                items: [
                    { name: 'beixi' },
                    { name: 'jzj' },
                    { name: 'beixi' },
                    { name: 'jzj' },
                    { name: 'beixi' },
                    { name: 'jzj' },
                    { name: 'beixi' },
                    { name: 'jzj' }
                ]
            }
        })
    </script>
    </body>
    </html>

    v-for 还支持一个可选的第二个参数为当前项的索引,索引从 0 开始,代码如下:
    <ul id="app"> 
          <li v-for="(item,index) in items"> 
          {{index}}-- {{ item.name }} 
       </li> 
    </ul>
    v-for 来遍历对象
    
    <!DOCTYPE html>
    <html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <meta charset="utf-8"/>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
    <ul id="app">
        <li v-for="value in object">
            {{ value }}
        </li>
    </ul>
    <script type="text/javascript">
        var vm=new Vue({
            el: '#app',
            data: {
                object: {
                    name: 'beixi',
                    gender: '',
                    age: 30
                }
            }
        })
    </script>
    </body>
    </html>
     v-for 用于整数
    
    <ul id="app"> 
            <li v-for="n in 10">
                       {{n}}
               </li> 
    </ul>
    <script type="text/javascript">
              var vm=new Vue({ 
                     el: '#app',
                   })
    </script>
    template 标签用法 
    Vue 提供了内置标签<template>,可以将多个元素进行渲染,代码如下:
    <div id="app">
     <div v-if="ok"> 
           <p>这是第一段代码</p> 
           <p>这是第二段代码</p> 
           <p>这是第三段代码</p>
       </div>
    </div> 
    
     <script type="text/javascript"> 
          var vm=new Vue({ 
                el: '#app', 
                data:{
                       ok:true 
               } 
            }) 
    </script>
    同样,<template>标签也支持使用 v-for 指令,用来渲染同级的多个兄弟元素,代码如 下:
    <ul id="app">
           <template v-for="item in items">
                 { { item . name } }
                 { { item.age }}
            </template>
    </ul>
    <script type="text/javascript">
           var vm=new vue ( {
                   el: '#app ',
                   data: {
                       items: [
                             { name : 'beixi' },
                             { age: 18 }
                        ]
                  }
             })
    </script>
  • 相关阅读:
    Common Lisp 参数传递的几种形式
    EF架构~基于EF数据层的实现
    标准架构~业务层到底是否应该关注数据持久化的方式
    Redis学习笔记~Redis主从服务器,读写分离
    Redis学习笔记~是时候为Redis实现一个仓储了,RedisRepository来了
    MVVM架构~knockoutjs系列之数组的$index和$data
    【Oracle】-【sqlplus / as sysdba登录报错问题】-新用户使用sqlplus / as sysdba登录报错
    Android---App Widget(一)
    Mit 分布式系统导论,Distributed Systems ,lab1 -lab6 总结,实验一到实验六总结
    GDAL切割重采样遥感图像
  • 原文地址:https://www.cnblogs.com/tszr/p/15390944.html
Copyright © 2020-2023  润新知