条件判断能否显示

 <!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. C++用sqlite3_open连接打开指定数据库的小问题

    一开始我也纳闷,我以为是我数据库没弄好,但是当我仔细检查,才发现 原来我少了分号 写少了分号,可能会导致  database    和  table    找不到... 所以用的时候需要注意... 代 ...

  2. 《ES6标准入门》(阮一峰)--6.正则的扩展

    1.RegExp 构造函数 在 ES5 中,RegExp构造函数的参数有两种情况. 第一种情况是,参数是字符串,这时第二个参数表示正则表达式的修饰符(flag). var regex = new Re ...

  3. ROS大型工程学习（一） 必须了解的基本文件

    一.Cmake文件 阅读工程,首先点开CMakeLists 文件,会定义一些库和可执行文件.首先看可执行文件,rosrun的就是这个节点navigator add_executable(navigat ...

  4. Oracle SQL 异常处理

    今天学了异常处理 有预定义异常 与 用户自定义异常 还有 raise_application_error()函数raise_application_error() 只能把异常抛出而不能处理异常. 预定 ...

  5. laravel.url

    通过php artisan route:list 可以看到当前应用的路由情况, 在前端页面中如果要修改一个实体,需要用到实体.update,涉及的uri为实体/{实体},所用的http方法为put. ...

  6. [JZOI]1251.收费站[二分][最短路]

    Description 在某个遥远的国家里,有n个城市.编号为1,2,3,--,n. 这个国家的政府修建了m条双向的公路.每条公路连接着两个城市.沿着某条公路,开车从一个城市到另一个城市,需要花费一定 ...

  7. Codeforces Round #616 (Div. 2) 题解

    A. Even But Not Even 题意: 定义一个数所有位置的和为偶数它本身不为偶数的数为ebne,现在给你一个数字字符串,你可以删除任意位置上的数字使其变为ebne输出任意改变后的结果,如果 ...

  8. Vue.js（23）之 keepAlive和activated

    阅读: vue中前进刷新.后退缓存用户浏览数据和浏览位置的实践 keep-alive 组件级缓存 keep-alive <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而 ...

  9. 吴裕雄--天生自然C++语言学习笔记：C++ 数组

    C++ 支持数组数据结构,它可以存储一个固定大小的相同类型元素的顺序集合.数组是用来存储一系列数据,但它往往被认为是一系列相同类型的变量. 数组的声明并不是声明一个个单独的变量,比如 number0. ...

  10. 两表关联更新数据——oracle

    from testb b where b.id=a.id) ; (where exists(select 1 from testb b where b.id=a.id):如果没有这个条件,不匹配的选项 ...