在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. Ubuntu下rsyslog审计用户bash操作命令、收集、写入MySQL

    服务端 2台服务端:10.25.109.64.10.45.18.133 1.rsyslog最新版本安装 sudo add-apt-repository ppa:adiscon/v8-stable su ...

  2. abp架构中加载公共css样式表和公共js的文件目录位置

    src\shared\helpers\LocalizedResourcesHelper.ts

  3. 我在B站学习 Javascript入门教程 基础

    B站av9243452的一系列视频,适合学过其他编程语言的人观看,还挺不错的 共43节,该随笔为1~16节 Js介绍 如需使用外部文件,请在 <script> 标签的 "src& ...

  4. jquery——动画

    1.通过animate方法可以设置元素某属性值上的动画 <!DOCTYPE html> <html lang="en"> <head> < ...

  5. python3+Appium自动化05-xpath定位

    概念 xpath定位是一种路径定位方式,主要是依赖于元素绝对路径或者相关属性来定位,但是绝对路径xpath执行效率比较低(特别是元素路径比较深的时候),一般使用比较少.通常使用xpath相对路径和属性 ...

  6. Spark最简安装

    该环境适合于学习使用的快速Spark环境,采用Apache预编译好的包进行安装.而在实际开发中需要使用针对于个人Hadoop版本进行编译安装,这将在后面进行介绍. Spark预编译安装包下载——Apa ...

  7. log(A/B) = logA -logB

    令 X = logA, Y = logB, Z=log(A/B) .2x = A, 2y = B, 2z = A/B, 则有 2z = A/B = 2x / 2y = 2x-y ,有z = x-y,即 ...

  8. ABAP：从例子学习ABAP

    1.插入内表行: *插入内表行: DATA: BEGIN OF man, name(20) TYPE c, high TYPE p DECIMALS 2, weight TYPE p DECIMALS ...

  9. weblogic 忘记控制台账号密码 进行重新设置

    第一步:首先要关闭weblogic服务. 第二步:对一些重要的文件进行备份: 1. 为了保证操作安全,备份%DOMAIN_HOME%/security/DefaultAuthenticatorInit ...

  10. 【extjs6学习笔记】0.3 准备： 类库结构2