条件判断能否显示

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>vue的逻辑判断学习</title>

     <script type="text/javascript" src="./js/vue.js"></script>

     <script type="text/javascript">

     window.onload= function(){

         var app = new Vue({

             el:"#a",

             data:{

                 //能否显示

                 seen:true,

                 seen1:false

             }

         });

     }

     </script>

 </head>

 <body>

     <div id="a">

         <!-- 使用vue的判断标签来显示或者隐藏元素 -->

         <p v-if="seen">你能看见我</p>

         <span v-if="seen1">你不能看见我</span>

             <!-- 判断 if else 随机出现-->

         <div v-if="Math.random() > 0.5">

         现在你能看见我

         </div>

         <div v-else>

         你现在看不见我

         </div>

     </div>

 </body>

 </html>

vue简单逻辑判断的更多相关文章

  1. Vue简单基础 + 实例 及 组件通信

    vue的双向绑定原理:Object.defineProperty() vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫 ...

  2. vue简单实现

    vue简单实现 vue的三个核心 虚拟dom, 双向绑定 Proxy,

  3. html vue简单

    1.Vue 简单的替换更新 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  4. 一篇文章带你了解网页框架——Vue简单入门

    一篇文章带你了解网页框架--Vue简单入门 这篇文章将会介绍我们前端入门级别的框架--Vue的简单使用 如果你以后想从事后端程序员,又想要稍微了解前端框架知识,那么这篇文章或许可以给你带来帮助 温馨提 ...

  5. vue（2）—— vue简单语法运用，常用指令集

    按照前面的文章:vue(1)——node.js安装使用,利用npm安装vue  安装完vue之后,就可以使用vue了 vue vue简介 前面安装好vue之后,确实还没有对vue进行介绍,首先,官网: ...

  6. vue初学实践之路——vue简单日历组件(1)

    ---恢复内容开始--- 最近做的项目有一个需求,需要有一个日历组件供预定功能使用,之前的代码过于繁琐复杂,所以我采用vue重写了这个组件. npm.vue等等安装. 只是一个简单的日历组件,所以并不 ...

  7. 极速搭建RTMP直播流服务器+webapp (vue) 简单实现直播效果

    在尝试使用webRTC实现webapp直播失败后,转移思路开始另外寻找可行的解决方案.在网页上尝试使用webRTC实现视频的直播与看直播,在谷歌浏览器以及safari浏览器上测试是可行的.但是基于基座 ...

  8. vue简单介绍

    最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在 ...

  9. vue简单demo

    为了学习基础语法,我并没有用vue-cli脚手架来vue init [基于什么类型]  [项目名称]初始化项目,而是直接<script>../vue.js</script> & ...

随机推荐

  1. python三大神器===》生成器

    1. 认识生成器 利用迭代器,我们可以在每次迭代获取数据(通过next()方法)时按照特定的规律进行生成.但是我们在实现一个迭代器时,关于当前迭代到的状态需要我们自己记录,进而才能根据当前状态生成下一 ...

  2. 【WPF学习】第二十四章 基于范围的控件

    WPF提供了三个使用范围概念的控件.这些控件使用在特定最小值和最大值之间的数值.这些控件——ScrollBar.ProgressBar以及Slider——都继承自RangeBase类(该类又继承自Co ...

  3. 女神说不能每张照片P的一样，所以朋友圈开三天可见，用Python一步解决

    大家好,我是小三十三,一个刚恰完午饭,正在用刷网页浪费生命的蒟蒻... 一堆堆无聊八卦信息的网页内容慢慢使我的双眼模糊,一个哈欠打出了三斤老泪,就在此时我看到了一张图片: ! 是谁!是谁把我女朋友的照 ...

  4. 069-PHP数组下标

    <?php $arr=array(98,'hello',67,'A',85,NULL); //定义一个数组 $x=0; //定义三个作为下标的变量 $y=3; $z=5; echo " ...

  5. VMware虚拟机黑屏

    引用自:VMware吧 近期很多朋友遇到了VMware Workstation 14开启或新建虚拟机后黑屏的现象,无法关机,软件也无法关闭 用任务管理器结束VMware后这个VMX进程也关不了 解决办 ...

  6. Elasticsearch 过滤

    章节 Elasticsearch 基本概念 Elasticsearch 安装 Elasticsearch 使用集群 Elasticsearch 健康检查 Elasticsearch 列出索引 Elas ...

  7. ESP8266 SDK开发: 外设篇-串口

    串口分布 串口切换说明 1.默认所有的数据都使用串口0输出 官方提供了函数可以选择printf利用哪一个串口输出 配置printf使用串口1打印输出,波特率115200 (注:这样配置对于调试程序很有 ...

  8. Vulkan SDK 之 Device

     Enumerate Physical Devices Vulkan instance创建完成之后,vulkan loader是知道你有几个物理设备(显卡),但是程序不知道,需要通过 相关接口获取设备 ...

  9. 数据库之存储过程Procedure

    数据库之存储过程 一.概述 SQLserver中视图通过简单的select查询来解决复杂的查询,但是视图不能提供业务逻辑功能,而存储过程可以办到. 二.什么是存储过程 存储过程procedure是一组 ...

  10. Linux command line and shell scripting buble

    Chapter 4 More bash shell Commands 1. ps ps -ef 2. top 3. kill 3940 kill -s HUP 3940 killall http* 4 ...