在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. 修改Gradle本地仓库

    问题描述 Gradle 默认的本地仓库为 C:\Users\用户名\.gradle,不想让其一直下载东西占用 C 盘资源. 解决方法 新建环境变量名:GRADLE_USER_HOME,变量值为:D:\ ...

  2. 27 个Jupyter Notebook的小提示与技巧

    不多说,直接上干货! 见 http://liuchengxu.org/pelican-blog/jupyter-notebook-tips.html

  3. 机器学习框架ML.NET学习笔记【3】文本特征分析

    一.要解决的问题 问题:常常一些单位或组织召开会议时需要录入会议记录,我们需要通过机器学习对用户输入的文本内容进行自动评判,合格或不合格.(同样的问题还类似垃圾短信检测.工作日志质量分析等.) 处理思 ...

  4. C#对象和集合初始值设定项

    对象初始值设定项 使用对象初始值设定项,你可以在创建对象时向对象的任何可访问字段或属性分配值,而无需调用后跟赋值语句行的构造函数. 利用对象初始值设定项语法,你可为构造函数指定参数或忽略参数(以及括号 ...

  5. Java规则引擎drools：drt动态生成规则并附上具体项目逻辑

    一 整合 由于本人的码云太多太乱了,于是决定一个一个的整合到一个springboot项目里面. 附上自己的项目地址https://github.com/247292980/spring-boot 以整 ...

  6. aapt.exe finished with non-zero exit value 1

    在一个APP 中导入 严振杰的 ALBUM,出现错误 在网上找了各种,最后在 stackoverflow上找到这样的说法: -Go to File->project structure-> ...

  7. css高度已知，左右定宽，中间自适应三栏布局

    css高度已知,左右定宽,中间自适应三栏布局: <!DOCTYPE html> <html lang="en"> <head> <meta ...

  8. 关于echarts和jqeury的结合使用问题

    今天在工作上遇到了一个小问题,就是自己在用echarts渲染了一个柱状图,然后点击其他位置,将渲染echart的div进行了清空,这里我所有的echart图形都是在同一个div中渲染的,然后当再次要求 ...

  9. SpringBoot常用应用属性配置表

    #========================================= #COMMON SPRING BOOT PROPERTIES # #This sample file is pro ...

  10. iOS中UIWebview中网页宽度自适应的问题

    有的网页中会使用"<meta name="viewport" content="width=device-width, initial-scale=1.0 ...