(尚008)Vue条件渲染

1.test008.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>条件渲染</title></head><body><!--1.条件渲染指令    v-if    v-else    上面两个做影藏是是通过把标签移除,需要再创建一个在显示出来    v-show    通过样式来影藏,内存中对象还在2.比较v-if与v-show    如果需要频繁切换用v-show较好--><div id="demo">    <p v-if="ok">成功了</p>    <!--v-else="true"=v-else-->    <p v-else>失败了</p>

    <p v-show="ok">表白成功</p>    <p v-show="!ok">表白失败</p>    <!--厉害了-->    <button @click="ok=!ok"> 切换</button></div>

<script type="text/javascript" src="../js/vue.js"></script><script type="text/javascript">    new Vue({        el:‘#demo‘,        data:{            //需要有标识属性来标识是否成功了            ok:false    }    })</script></body></html>2.页面显示:

点击按钮后:

厉害了!!!

原文地址：https://www.cnblogs.com/curedfisher/p/12015741.html

时间： 2024-08-30 01:58:11

(尚008)Vue条件渲染的相关文章

vue条件渲染

v-if 在字符串模板中,如 Handlebars ,我们得像这样写一个条件块:  {{#if ok}} <h1>Yes</h1> {{/if}} 在 Vue.js ,我们使用 v-if 指令实现同样的功能: <h1 v-if="ok">Yes</h1> 也可以用 v-else 添加一个 "else" 块: <h1 v-if="ok"&g

根据不同的条件,响应不同的事件. https://jsfiddle.net/miloer/zed5p1r3/ 可以用template来包装元素,当然浏览器的最终渲染结果不会包含它.我觉得主要用它来自定义模块组件. <template v-if=“msg”><h1>Title</h1><p>Paragraph 1</p><p>Paragraph 2</p></template> 发现个小问题当JS代码有误的时候,

[vue]vue条件渲染v-if(template)和自定义指令directives

条件渲染: v-if/template <div id="app"> <h1>v-show: display: none</h1> <div v-show="false">yes</div>  <h1>v-for: 判断1</h1> <div v-if="false"&

关于vue.js中条件渲染的联系

html: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>条件渲染</title></head><body>   <div

【03】Vue 之列表渲染及条件渲染

3.1. 条件渲染有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作.最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据.如果有数据就显示表格数据. Vue帮我们提供了一个v-if的指令,帮助我们完成判断的模板处理. <div id="app"> <h1 v-if="ok">Yes</h1> <h1 v-else>No</h1> </div> <!-- 当ok为tr

VUE：条件渲染和列表渲染

条件渲染 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body>  <div id="

浅析Vue.js 中的条件渲染指令

1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> <p v-if="type===1">拌面</p> <p v-else-if="type===2">扁肉</p> <p v-else="type===3">其它</p> </div

Vue.js 实战教程 V2.x（9）条件渲染

9条件渲染 9.1 v-if v-if 指令用于条件性地渲染一块内容. <h1 v-if="awesome">Vue is awesome!</h1> 在 <template> 元素上使用 v-if 条件渲染分组 <template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</

4.vue的v-if和v-show条件渲染

代码如下, 1. v-if用于条件渲染-必须条件为真,才会渲染判断taye的值,就是JavaScript的表达式,满足条件为B则B 显示 ,v-if是真正的条件渲染,不满足不渲染,也为惰性渲染 2.v-show 用于根据条件展示某一个元素, 如果满足,则显示,如果不满足, 则为隐藏, 页面可检查到元素, 展示方式为 display: none; ,不管什么条件都渲染, 通过css隐藏和展示 3.如果频换的切换v-show, v-show更高的初始化开销 4.如果运行条件很少改变v-if,有更