zoukankan      html  css  js  c++  java
  • Vue渲染函数

    使用方法

    v-if :

    <h1 v-if="xkd">侠课岛</h1>
    

    template 中配合 v-if 条件渲染一整组 :

    <template v-if="a">
    	<h1>Title</h1>
    	<p>Paragraph one</p>
    	<p>Paragraph two</p>
    </template>
    

    使用v-else 指令来表示 v-if 的 else,v-else 元素必须紧跟在 v-if 或者 v-else-if元素的后面,否则它将不会被识别 :

    <h1 v-if="a">True</h1>
    <h1 v-else>FALSE</h1> 
    

    多次使用 v-if :

    <h1 v-if="color == 'red'" style="color: red;">红</h1>
    <h1 v-else-if="color == 'green'" style="color: green;">绿</h1>
    <h1 v-else="color == 'blue'" style="color: blue;">蓝 </h1>
    

    如图所示:

    key 管理可复用的元素

    通常会复用已有元素而不是从头开始渲染(就近原则),key使得vue渲染速度会变得非常快。

    下面是key的使用方法:

    <body>
      <div id="main">
        <template v-if="loginType === 'username'">
          <label>用户名</label>
          <input placeholder="请输入用户名" key="username-input" />
        </template>
        <template v-else>
          <label>邮箱</label>
          <input placeholder="请输入邮箱" key="email-input" />
        </template>
        <input type="button" value="切换" v-on:click="changeType" />
    
      </div>
    </body>
    
    <script>
      var vm = new vue({
        el: '#main',
        data: {
          'loginType': 'username'
        },
        methods: {
          changeType: function() {
            if (this.loginType == 'username') {
              this.loginType = 'email';
            } else {
              this.loginType = 'username';
            }
          }
        }
      })
    </script>
    

    资源搜索网站大全 https://www.renrenfan.com.cn 广州VI设计公司https://www.houdianzi.com

    v-show vs v-if

    v-show:

    <h1 v-show="xkd">Hello!</h1>
    

    v-show:比较简单,不管初始条件是什么,元素总是会被渲染,并且只是简单的基于css进行变换。初始渲染开销较大。

    v-if:有更高的切换开销。

    如果需要非常频繁的切换,那么使用v-show比较好;如果在运行条件不太可能改变的情况下,则使用v-if较好。

  • 相关阅读:
    POJ 1451
    LightOJ 1224
    POJ 2001
    HDU 2072
    POJ 3764
    CH 1602
    CH 1601
    Gym 101873K
    CH 1201
    Gym 101873C
  • 原文地址:https://www.cnblogs.com/xiaonian8/p/14092507.html
Copyright © 2011-2022 走看看