在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. Unity (反向动力学)IK动画

  2. dell电脑 win8换win7重启报错及解决方案

    Win8换win7 bios 识别不到usb选项 按以下操作即可: 把Secure Boot control 改为Disabled 的,F10保存重启,F12进入bios选择usb启动即可: 安装完系 ...

  3. net 提供了Thread类用于线程的操作

    net 提供了Thread类用于线程的操作. 当初始化一个线程,把Thread.IsBackground=true的时候,指示该线程为后台线程.后台线程将会随着主线程的推出而退出.后台线程不妨碍程序的 ...

  4. Java实例学习——企业进销存管理系统（3）

    Java实例学习--企业进销存管理系统(3) (本实例为书上实例,我所记录的是我的学习过程) 开始时间:2月12日 完成时间:暂未完成 2月16日-公共类(Item公共类,数据模型公共类,Dao公共类 ...

  5. 分享一个WPF下日历控件（Calendar）的样式

    WPF日历控件的一个样式 WPF自带的日历控件样式可能会比较丑,要修改其样式看起来挺复杂的,实际上很简单,用Blend打开,修改三个模板,基本就能改变全部面貌,也很容易 先上图 样式如下: <S ...

  6. 个人整理的jsp、EL表达式、JSTL标签库的笔记，少概念多实用，需要的留下邮箱，会第一时间分享原稿PDF给大家！

    jsp 第一章 jsp介绍及对比servlet 作用: 动态网页技术,动态的从数据库获取数据 jsp和servlet的优缺点: jsp优点:页面表现方便,利于写html代码 jsp缺点:业务逻辑处理麻 ...

  7. magento新增商品属性以及将属性加入Flat table

    magento的EAV模型非常强大且灵活,但是如果不做优化的话,性能会非常低,因为attributes都存放在附表里,要获取一个entity的attribute,需要表联结一次,如果需要获取多条att ...

  8. Counting blessings can actually increase happiness and health by reminding us of the good things in life.

    Counting blessings can actually increase happiness and health by reminding us of the good things in ...

  9. Miner3D Developer 开发工具

    ——可视化的数据挖掘整合工具 在开发项目中,客户的要求多种多样.当开发者面临高挑战的工作时,完全可以选择Miner3D这样的软件,依赖其强大的数据可视化的特点,以及其他的明显的技术优势,提供给最终用户 ...

  10. windows 下设置MTU数值

    输入:netsh interface ipv4 show subinterfaces 查询到目前系统的MTU值.再分别输入一行按一次回车键. netsh interface ipv4 set subi ...