在vue中一些常用的指令都是v-这样的，v-if是vue的一个内部指令，常用于html中

代码

<!DOCTYPE html>
html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-IF</title>
<script src="../assets/js/vue.js"></script>
</head>
<body>
　　<div id="app">
　　<div v-if='isLogin'>你好，jsY</div>
　　</div>
　　 <script>
　　　　var Vm = new Vue({
　　　　el:'#app',
　　　　data:{
　　　　isLogin:false //当isLogin为false时 你好，jsY是不显示的，为true的时候是显示的
　　　　}
　　　　 })
　　</script>
</body>
</html>
运行结果
当isLogin的值为false的时候
当isLogin的值为true的时候

 
 

Vue入门之v-if的使用的更多相关文章

  1. 学习Vue 入门到实战——学习笔记

    闲聊: 自从进了现在的公司,小颖就再没怎么接触vue了,最近不太忙,所以想再学习下vue,就看了看vue相关视频,顺便做个笔记嘻嘻. 视频地址:Vue 入门到实战1.Vue 入门到实战2 学习内容: ...

  2. Vue入门系列（五）Vue实例详解与生命周期

    Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一)  http://www.cnblogs.com/gdsblog/p/78 ...

  3. [Vue入门及介绍，基础使用、MVVM架构、插值表达式、文本指令、事件指令]

    [Vue入门及介绍,基础使用.MVVM架构.插值表达式.文本指令.事件指令] 1)定义:javascript渐进式框架 ​ 渐进式:可以控制一个页面的一个标签,也可以控制一系列标签,也可以控制整个页面 ...

  4. wepack+sass+vue 入门教程（三）

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  5. wepack+sass+vue 入门教程（二）

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  6. wepack+sass+vue 入门教程（一）

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

  7. vue入门学习（基础篇）

    vue入门学习总结: vue的一个组件包括三部分:template.style.script. vue的数据在data中定义使用. 数据渲染指令:v-text.v-html.{{}}. 隐藏未编译的标 ...

  8. VUE 入门笔记

    前端的MVVM概念今年来也算是如火如荼,了解完 MVVM的概念,也该找个去尝试下 首先我先试了下 国内小而美的 VUE 试着照着文档敲出入门文件,内容都在注释里 <!doctype html&g ...

  9. Vue 入门指南 JS

    Vue 入门指南 章节导航 英文:http://vuejs.org/guide/index.html 介绍 vue.js 是用来构建web应用接口的一个库 技术上,Vue.js 重点集中在MVVM模式 ...

  10. Vue学习记录第一篇——Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

随机推荐

  1. Keepalived + Nginx + Tomcat 高可用负载均衡架构

    环境: 1.centos7.3 2.虚拟ip:192.168.217.200 3.192.168.217.11.192.168.217.12上分别部署Nginx Keepalived Tomcat并进 ...

  2. Java中文编程开发，让Java编写更改复杂

    额?what? 在B站无意中看到一张图,无意间已发了自己的好奇,实际上我早就知道Java支持Unicode编码也就是可以使用中文命名规则,但是我们可以包装一下,玩一玩完全使用中文编码也未尝不可,但是经 ...

  3. Asp.net Core 创建控制器时出错问题记录(运行所选代码生成器时出错)

    问题描述:在创建一个MVC控制器(带读写,使用EF) 解决方法:添加nuget包

  4. Django 02 url路由配置及渲染方式

    Django 02 url路由配置及渲染方式 一.URL #URL #(Uniform Resoure Locator) 统一资源定位符:对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示,是 ...

  5. 使用C#连接 MyCat 链接串

    所属专栏: mycat的安装部署以及监控和运维    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u014180504/article/detai ...

  6. java——变量、jvm内存划分

    基本数据变量类型:byte.short.int.long.float.double.boolean.char eg : int i = 1; 引用数据变量类型:数组.类.接口.枚举.注解 eg : S ...

  7. Java的Map和Object之间的相互转换方法

    public staic Map<String, Object> objectToMap(Object obj) throws Exception { if(obj == null) re ...

  8. 去除pycharm的波浪线

    PyCharm使用了较为严格的PEP8的检查规则,如果代码命名不规范,甚至多出的空格都会被波浪线标识出来,导致整个编辑器里铺满了波浪线,右边的滚动条也全是黄色或灰色的标记线,很是影响编辑.这里给大家分 ...

  9. 动态页面技术----EL技术、JSTL技术，javaEE的开发模式

    1 EL技术 1.1 EL 表达式 EL(Express Lanuage)表达式可以嵌入在jsp页面内部,减少jsp脚本的编写, EL出现的目的是要替代jsp页面中脚本的编写,就是简化java代码. ...

  10. Vue系列：关于侵权前言

    因为一开始学习 Vue 的时候,秉持的是"好记性不如烂笔头"的思想,所以这些知识点都是当时查阅然后选择性摘录下来的. 当时并没有很刻意去记录原文出处(现在我知错了..),所以..如 ...