Vue 框架-06-条件语句 v-if 实现选项卡效果

本片介绍的是 Vue 中条件语句 v-if

第一个小实例是，通过 v-if=“布尔值”，通过布尔值的真假来决定，某元素是否显示

源代码 html 文件：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title>VueLearn-cnblogs/xpwi</title>

		<!--引入自定义的样式-->

		<link rel="stylesheet" href="css/style.css" />

		<!--引入 vue 核心 js-->

		<script type="text/javascript" src="js/vue.js" ></script>

	</head>

	<body>

		<!--vue-app 是根容器，定义一个 id，然后在 js 里操作-->

		<div id="vue-app">

			<h2> v-if </h2>

			<button v-on:click="error=!error">切换</button>

			<p v-if="error">网络连接错误：404</p>

		</div>

		<!--引入自己的 js，注意必须写在 body 标签里最后，因为必须先加载你的整个 HTML DOM，才回去执行 vue 实例-->

		<script type="text/javascript" src="js/if.js" ></script>

	</body>

</html>

原代码 js 文件：

//实例化 vue 对象

new Vue({

	//注意代码格式

	//el：element 需要获取的元素，一定是 html 中的根容器元素

	el:"#vue-app",

	data:{

		error : false,

	},

	methods:{

	}

});

正经实例：实现简单选项卡效果：

源代码 html 文件：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title>VueLearn-cnblogs/xpwi</title>

		<!--引入自定义的样式-->

		<link rel="stylesheet" href="css/if.css" />

		<!--引入 vue 核心 js-->

		<script type="text/javascript" src="js/vue.js" ></script>

	</head>

	<body>

		<!--vue-app 是根容器，定义一个 id，然后在 js 里操作-->

		<div id="vue-app">

			<h2> v-if </h2>

			<button v-on:click="selectA=true;selectB=false;selectedB=false;selectedA=true" v-bind:class="{red:selectedA}">选择A</button>

			<button v-on:click="selectA=false;selectB=true;selectedB=true;selectedA=false" v-bind:class="{red:selectedB}">选择B</button>

			<p v-if="selectA">这里是AAAAAAA</p>

			<p v-else-if="selectB">这里是BBBBBBB</p>

		</div>

		<!--引入自己的 js，注意必须写在 body 标签里最后，因为必须先加载你的整个 HTML DOM，才回去执行 vue 实例-->

		<script type="text/javascript" src="js/if.js" ></script>

	</body>

</html>

源代码 js 文件：

//实例化 vue 对象

new Vue({

	//注意代码格式

	//el：element 需要获取的元素，一定是 html 中的根容器元素

	el:"#vue-app",

	data:{

		selectA : true,

		selectB : false,

		selectedA : true,

		selectedB : false

	},

	methods:{

	}

});

源代码 css 文件：

.red{

	color: red;

}

Vue 框架-06-条件语句 v-if 实现选项卡效果的更多相关文章

  1. 【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法

    Vue框架常用知识点 文章目录 Vue框架常用知识点 知识点解释 第一个vue应用 模板语法 计算属性与侦听器 条件渲染.列表渲染.Class与Style绑定 知识点解释 vue框架知识体系 [1]基 ...

  2. vue条件语句v-if、v-else、v-else-if用法

    vue条件语句v-if.v-else.v-else-if用法 v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建.v-if 也是惰性的:如果在初始渲 ...

  3. vue条件语句、循环语句、计算属性、侦听器监听属性

    因为 v-if 和v-for是一个指令,所以必须将它添加到一个元素上.但是如果想切换多个元素呢?此时可以把一个 <template> 元素当做不可见的包裹元素,并在上面使用 v-if.最终 ...

  4. vue使用案例，vue初始化，vue初始化方法，vue条件语句，vue在js里面添加元素调用vue方法

     <div id="main" > <button id='but1' type="button" v-on:click="save ...

  5. vue之条件语句小结

    vue之条件语句小结 v-if, v-else 随机生成一个数字,判断是否大于0.5,然后输出对应信息: <!DOCTYPE html> <html> <head> ...

  6. vue(二)--条件语句

    条件语句:v-if     v-else   v-else-if    v-show v-else .v-else-if 必须跟在 v-if 或者 v-else-if之后. 1.v-if <bo ...

  7. VUE框架的初识

    VUE框架的初识 初步了解Vue.js框架(渐进式前端框架) Vue.js是一种轻量级的前端MVVM框架.同时吸收了React(组件化)和Angular(灵活指令页面操作)的优点.是一套构建用户界面的 ...

  8. 10.vue框架

    vue框架 易用.灵活.高效 https://cn.vuejs.org/ mvc M model 数据 模型 V view 视图 dom操作 C controller 控制器 路由 C oBtn.on ...

  9. Vue 框架-08-基础实战 demo

    Vue 框架-08-基础实战 demo 前面介绍了有 7 篇了,都是小实例,没有相对完整的应用,虽然有些功能挺实用,但还是有的不常用的,今天记录一篇关于前几篇基础内容的实战 demo,也是对 Vue ...

随机推荐

  1. 聚类系数可变无标度网络模型Holme-Kim HK模型

    # -*- coding: cp936 -*- import random import networkx as nx from networkx.generators.classic import ...

  2. js时间的应用(再看看前面,会发现不一样的)

    1.年份(1970-) 获取 date.getFullYear(); 设置 date.setFullYear(2016); 2.月份(0-11) 0代表1月 获取 date.getMonth() 设置 ...

  3. eclipse outline 中图标含义

    先说颜色:  绿色:public  黄色:protected  蓝色:no modifier  红色:private 再说形状:  实心:method  空心:variable  实心中间有字母C:c ...

  4. 马哥Python 开发9期

    LVS工作模式: 传输层 会话保持:负载均衡(1) session sticky:同一用户调度固定服务器Source IP:LVS sh算法(对某一特定服务而言)Cookie(2) session r ...

  5. javascript数据基本类型和引用类型区别详解

    JavaScript基本数据类型: js基本数据类型包括:undefined,null,number,boolean,string.基本数据类型是按值访问的,就是说我们可以操作保存在变量中的实际的值. ...

  6. Vue.js系列之一初识Vue

    在看vue.js之前,可以先看这两篇文章,对于为什么要使用vue会有一定帮助 1.Vue.js !important 2.界面之下:还原真实的MV*模式 !important 3.web前端优化之re ...

  7. CentOS rar

    基本unrar用法: unrar x -o- -y heidian.rar /var/www/ (把heidian.rar 文件,解压到/var/www/ 目录.要注意/ 结束)

  8. SpringMVC源码阅读：Json，Xml自动转换

    1.前言 SpringMVC是目前J2EE平台的主流Web框架,不熟悉的园友可以看SpringMVC源码阅读入门,它交代了SpringMVC的基础知识和源码阅读的技巧 本文将通过源码(基于Spring ...

  9. SpringMVC form 表单提交报400错误

    错误代码: HTTP Status 400 - type Status report message description The request sent by the client was sy ...

  10. oracle = : ：= 和变量绑定 oracle通配符和运算符

    这篇是7788凑的:":="是赋值语句 如: l_name :='sky';..."=" 是判断是否相等. 如: if 1=1 then...":&q ...