Vue.js-条件渲染 原

v-if 条件渲染指令,根据其后表达式的bool值进行判断是否渲染该元素;

<div id="example01">
 <p v-if="male">Male</p>
 <p v-if="female">Female</p>
 <p v-if="age>25">Age:{{age}}</p>
 <p v-if="name.indexOf('lin')>0">Name:{{name}}</p>
</div>
var vm= new Vue({
 el:"#example01",
 data:{
   male:true,
   female: false,
   age:29,
   name:'colin'
 }
 })

在<template>中配合v-if条件渲染一整组 因为v-if是一个指令,需要将它添加到一个元素上,但是如果我们想切换多个元素,此时我们可以把一个<template>元素当做包装元素,并在上面使用v-if,最终的渲染结果不会包含<template>元素 

<body class="">
    <div id="app-7">
    <template v-if="ok">
    	<h1>yes</h1>
    	<p>duanluo1</p>
    	<p>duanluo2</p>
    </template>
    </div>
    <script src="js/vue.js"></script>
    <script>
	Vue.component('my-component', {
  template: '<p class="foo bar">Hi</p>'
})
    var app = new Vue({
        el: "#app-7",
        data: { ok: true},
        
    })
    </script>
</body>

<body class="">
    <div id="app-7">
        <div v-if="type==='A'">A</div>
        <div v-if="type==='B'">B</div>
        <div v-if="type==='C'">C</div>
    </div>
    <script src="js/vue.js"></script>
    <script>
	Vue.component('my-component', {
  template: '<p class="foo bar">Hi</p>'
})
    var app = new Vue({
        el: "#app-7",
        data: { type: 'B'},
        
    })
    </script>
</body>

v-else-if,顾名思义,充当 v-if 的“else-if 块”。可以链式地使用多次:

#用key管理可复用的元素

<body class="">
    <div id="app-7">
        <template v-if="loginType==='username'">
            <label>Username</label>
            <input placeholder="enter your username" key="usename">
        </template>
        <template v-else>
            <label>Email</label>
            <input placeholder="enter your email address" key="input">
        </template>
        <button v-on:click="changeMethod">切换</button>
    </div>
    <script src="js/vue.js"></script>
    <script>
    var app = new Vue({
        el: "#app-7",
        data: { loginType: "username" },
        methods: {
            changeMethod: function() {
                return this.loginType = this.loginType == "username" ? "email" : "username"
            }
        }
    })
    </script>
</body>
//v-if 根据表达式的值true 或者 false移除或插入html,key的作用是2个input是独立的

v-show 用法与v-if大致相同 <h1 v-show="ok">Hello!</h1> 不同的是带有v-show的元素始终会被渲染并保持在DOM中,是简单的切换元素的css display (显示或者隐藏) 注意:v-show不支持<template>语法,也不支持v-else

v-if与v-for一起使用 当v-if与v-for一起使用时,v-for具有比v-if更高的优先级

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏娱乐心理测试

navigateTo:fail page "pages/goodsDetails/javascript:void(0);" is not found

在vue.js项目转化到mpvue的小程序项目的过程中,执行事件时,报了如下图所示的错误:

23720
来自专栏娱乐心理测试

解读mpvue官方文档的Class 与 Style 绑定及不支持语法

在vue.js项目转化为小程序时,把原来页面的代码直接拷贝过去,发现布局改变很多,很多已经设置的标签的css样式并没有显示出来,查看官方文档,得知原来vue.j...

15430
来自专栏娱乐心理测试

mpvue页面跳转及传值

vue中 使用 vue-router 来进行路由跳转的。mpvue中只能通过以下几种方式跳转: (1).a 标签

3.1K20
来自专栏前端儿

记一次vue长列表的内存性能分析和优化

这个长列表页面,其实是一个实时日志上报的页面,随着页面打开时间的增加,日志数量也会增多,常规的页面布局和渲染免不了会遇到性能问题。

54860
来自专栏前端大白专栏

vue与react哪种好?

vue与react,到目前为止两个我都用来写了好多项目,vue用的脚手架是vue-cli,react用的是dva,两者都对其进行了很好的封装,只需要简单的几步就...

26420
来自专栏Modeng的专栏

Vue案例引发的「嵌套组件」通信的简单方式

我们都知道 Vue 是采用组件化开发的模式,组件化的优势在于相对独立,易于维护,可复用。你可以把项目看成许多组件的组合而成。

15620
来自专栏原创

个推前端微服务化:突破传统SPA瓶颈

目前的前端领域,单页面应用(SPA)大行其道。而随着时间的推移以及应用功能的丰富,这些应用变得越来越庞大也越来越难以维护。于是“微前端”这一概念应运而生。

25720
来自专栏原创

基于CMS的组件复用实践

目前前端项目大多基于Vue、React、Angular等框架来实现,这一类框架都有一个明显的特点:基于模块化以及组件化思维。所以,开发者在使用上述框架时,实际上...

8420
来自专栏一丘一壑

在WordPress中添加简书风格的连载目录和文章导航

自从机缘巧合的开始翻译Gensis的系列教程,越来越沉迷于研究这款WordPress主题框架了,一边翻译一边学习一边也在自己的丘壑博客上实验。

18520
来自专栏ChaMd5安全团队

webpack带来的安全风险

最近在资产收集过程中,发现越来越多的vue应用,大部分会使用webpack进行打包,如果没有正确配置,就会导致vue源码泄露。

30150

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励