zoukankan      html  css  js  c++  java
  • 第一章—v-if

    v-if

    介绍

    v-if是vue的一个条件渲染语法,官方文档对于它的解释为:

    v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。

    其实他的解释意思就是说当v-if里面的内容为true时,DOM节点里面的内容便可以渲染出来,反之则不会渲染。

    例如:

    <template>
    		<div v-if="demo">
    			渲染的内容
    		</div>
    	</div>
    </template>
    
    <script>
    	export default{
    		data:()=>{
    			return{
    				demo:true
    			}
    		}
    	}
    </script>
    

      此时页面中就会将div中的元素渲染出来。

    反之:

    <template>
    		<div v-if="demo">
    			渲染的内容
    		</div>
    	</div>
    </template>
    
    <script>
    	export default{
    		data:()=>{
    			return{
    				demo:false
    			}
    		}
    	}
    </script>
    

      div中的元素此时就不会显示。

    此外,我们也可以用 v-else 添加一个“else 块”:

    <h1 v-if="demo">内容1</h1>
    <h1 v-else>内容2</h1>
    

      当demo为true时,内容1便会被渲染出来,反之则会渲染出内容2.

     我们还可以用 v-else 添加一个v-else-if:

    官网实例为:

    <div v-if="type === 'A'">
      A
    </div>
    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else-if="type === 'C'">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>
    

      其用法与v-else相同。

    此外还应当注意,除了直接将v-if的内容设置为false外,还有一些元素隐形属性为false。

    • false
    • 0
    • “”
    • NAN
    • undefined
    • null

     当v-if设置为以上几种元素的时候,dom里面内容也不会渲染。

    您的批评是对我最大的鼓励,欢迎指正。

  • 相关阅读:
    webstorm快捷键大全
    Js的reduce()方法
    利用 c# linq 实现多个数据库的联合查询
    微信小程序支付接入注意点
    ubuntu所有php扩展php-7.0扩展列表
    ubuntu 16.04 php 安装curl方法
    Ubuntu下配置Apache开启HTTPS
    Mac下如何用SSH连接远程Linux服务器及Linux一些常用操作命令,更新中.....
    Mac下如何用SSH连接远程Linux服务器
    C#的dapper使用
  • 原文地址:https://www.cnblogs.com/tong666/p/11194583.html
Copyright © 2011-2022 走看看