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.页面显示:

点击按钮后:

厉害了!!!

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

  1. Vue条件渲染

    gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson08 一 v-if显示单个元素 注意else只能跟在v-if或者v-s ...

  2. Vue#条件渲染

    根据不同的条件,响应不同的事件. https://jsfiddle.net/miloer/zed5p1r3/ 可以用template来包装元素,当然浏览器的最终渲染结果不会包含它.我觉得主要用它来自定 ...

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

    条件渲染: v-if/template <div id="app"> <h1>v-show: display: none</h1> <di ...

  4. vue 条件渲染与列表渲染

    本文是对官方文档的整理 因为 v-if 是一个指令,所以必须将它添加到一个元素上.但是如果想切换多个元素呢?此时可以把一个 <template> 元素当做不可见的包裹元素,并在上面使用 v ...

  5. vue 条件渲染 v-if v-show

    1.要点 1.1 v-if     条件性地渲染一块内容 <h1 v-if="awesome">Vue is awesome!</h1> 附带  /  v- ...

  6. vue条件渲染2

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. (尚009)Vue列表渲染

    变异方法:说白了就是对原方法进行了包装,包装后实现了2个功能1:实现原方法的功能;2.更新界面. 1.test009.html <!DOCTYPE html><html lang=& ...

  8. vue 条件渲染v-if v-show

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. vue 条件渲染方式

    1.通过class绑定 <div :class="{'div-class': this.align == 'center'}"></div> 对应的css ...

随机推荐

  1. 15 IO流（十二）——数据流Data InputStream/OutputStream 未学会

    数据流的引入 Data流的父类是Filter抽象基类,也就是说Data流是装饰流. 数据流可以将数据的类型也一起传输. 数据流的读取写入顺序(数据类型的读写顺序)需要一致. 未完成代码 /** *Da ...

  2. MongoDB初始化创建管理员账户登录

    1.查看mongodb服务是否开启: ps -ef | grep mongod 2.管理员角色必须在启用--auth认证参数之前创建,否则会没有操作权限.如果之前已经创建过用户,请先删除. kill掉 ...

  3. Linux忘记root密码操作方法

    此方法为:进入单用户模式,直接修改新密码覆盖掉以前的root密码. 操作步骤: 1.进入单用户模式 2.修改root密码 1.进入单用户方法: 1)启动Linux时,通过按上下键(其他键也可以)让Li ...

  4. docker（四）：集群swarm

    docker使用入门(四):集群swarm swarm是一组位于同一集群且运行docker的机器,用户可以通过swarm manager向swarm输入命令,swarm中的机器可以是虚拟机也可以是物理 ...

  5. L2R 三：常用工具包介绍之 XGBoost与LightGBM

    L2R最常用的包就是XGBoost 和LightGBM,xgboost因为其性能及快速处理能力,在机器学习比赛中成为常用的开源工具包, 2016年微软开源了旗下的lightgbm(插句题外话:微软的人 ...

  6. PB连接ORALCE数据库方法

    本地必须配置连接服务

  7. git及gitflow命令备忘

    全文xxx表示你的分支名 一.git 删除本地分支 git branch -d xxx 删除远程分支 git push origin --delete xxx 查看所有分支 本地分支 git bran ...

  8. Java设计模式之委派模式(Dellegate/Dispather)

    概述: 委派模式有点像代理模式又有点像策略模式. 区别在于代理模式注重过程,委派模式注重结果. 生活中也有很多委派模式的例子:例如公司老板给项目经理下达任务,将任务全权交给项目经理,有项目经理根据一定 ...

  9. 利用ime-mode设置文本框只能输入正整数

    html: <input type="text" id="packageratio"style="ime-mode: disabled;&quo ...

  10. AppRTC服务搭建(测试)

    提供一个在线的webrtc服务器测试,需要的朋友看看.https://www.webrtcserver.cn/ 服务器搭建环境各有不同在此参考前人经验差试一下. 运行AppRTC需要使用Google ...