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. 【LEETCODE】54、数组分类，简单级别，题目：605、532

    数组类,简单级别完结.... 不容易啊,基本都是靠百度答案.... 希望做过之后后面可以自己复习,自己学会这个解法 package y2019.Algorithm.array; /** * @Proj ...

  2. .NET/C# 阻止屏幕关闭，阻止系统进入睡眠状态

    原文:.NET/C# 阻止屏幕关闭,阻止系统进入睡眠状态 在 Windows 系统中,一段时间不操作键盘和鼠标,屏幕便会关闭,系统会进入睡眠状态.但有些程序(比如游戏.视频和演示文稿)在运行过程中应该 ...

  3. 记一次在 Get 请求参数为 Null 值的折腾

    先说主要原因,是因为一个 NgZerro 的 Select 组件,需要显示 placeHolder 文字,初始值为 null,然后直接绑定到查询参数中,传输到后端导致 BadRequest,参数解析失 ...

  4. Java开发环境搭建（一）

    一.JDK与JRE JDK:Java Development Kit,Java开发工具包,是给开发人员使用的,其中包含了Java的开发工具,如java.javac.jar等命令,同时也包含了JRE. ...

  5. String 字符串的==和eqauls区别

    1.对于基本类型来说,==比较的是数据的值,equals方法也是数据的值: 对于引用类型来说,==比较的是引用的地址,equals方法比较的是对象的内容. 2.String是引用类型,用“=”创建字符 ...

  6. 可分离滤波器设计高斯滤波 CUDA程序优化， 实验记录

    环境:RTX2060 ,1920X1080p ,循环10次, kernal_size=8 一 .测试前128个线程拷贝到dst数据的性能  ,只测试行卷积, block=(128+2r)X1 1. 使 ...

  7. Flutter：教你用CustomPaint画一个自定义的CircleProgressBar

    https://www.jianshu.com/p/2ea01ae02ffe Flutter:教你用CustomPaint画一个自定义的CircleProgressBar paint_page.dar ...

  8. native function 'Window_sendPlatformMessage' (4 arguments) cannot be found

    https://github.com/pauldemarco/flutter_blue/issues/140 https://github.com/flutter/flutter/issues/168 ...

  9. Django：MTV——模版语句

    1.Django框架介绍 1.1MVC框架(Model View Controller) ​ 全名是Model View Controller ,是软件工程中的一种软件架构模式,把软件分为三个基本部分 ...

  10. mongoose 警告信息 { useNewUrlParser: true } { useUnifiedTopology: true }

    问题: 解决: