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. 一文详解python的类方法，普通方法和静态方法

    首先形式上的区别,实例方法隐含的参数为类实例self,而类方法隐含的参数为类本身cls. 静态方法无隐含参数,主要为了类实例也可以直接调用静态方法. 所以逻辑上,类方法被类调用,实例方法被实例调用,静 ...

  2. chrome 下修改 agent 的方法

    前言 这篇文章和 tiankonguse 的个人网站里的文章保持同步. 很早之前,在 chrome 下修改 agent 的方法是使用 chrome 插件. 后来 chrome 的某一个版本中自带这个功 ...

  3. 11-hdfs-NameNode-HA-wtihQJM解决单点故障问题

    在hdfs中, NN只有一个, 但其中保存的数据尤其重要, 所以需要将元数据保存, 其中源数据有2个形式, fsimage 和 edit文件, 最简单的解决方法就是复制fsimage, 并在文件修改时 ...

  4. vim---打造Python IDE

    1.文法高亮 为了能在Vim中支持Python文法需要用到插件python.vim,该插件默认位于(/usr/share/vim/vim72/)<Vim安装目录>/<$VIMRUNT ...

  5. puts,p,print的区别

    共同点:都是用来屏幕输出的. 不同点: puts 输出内容后,会自动换行(如果内容参数为空,则仅输出一个换行符号):另外如果内容参数中有转义符,输出时将先处理转义再输出 p 基本与puts相同,但不会 ...

  6. 软工网络15-Alpha阶段敏捷冲刺

    一.Alpha 阶段全组总任务 二.各个成员在 Alpha 阶段认领的任务 三. 整个项目预期的任务量 四.明日各个成员的任务安排 任务 预计时长 负责人 授权界面 2h 王华俊 难度选择界面 1h ...

  7. 百度地图VUE-REACT

    针对目前火热的前端开发框架React和VUE,为了方便使用这两种框架开发的同学们能更好的使用百度地图JSAPI,我们分别开源了基于百度地图JSAPI的React组件库和VUE组件库.VUE:https ...

  8. 【起】ACM类下为过往所做过的部分算法题目

    [起]ACM类下为过往所做过的部分算法题目 几百道题,日后细细品味.

  9. centOS7.2下 搭建gitlab使用git为团队管理代码

    最近更换了阿里云服务器  使用centOS7.2,目前配置1核2G,搭建gitlab有点吃力,另外如果1核1g就不要搭建了,推荐配置是2核4G以上 下面来简单记录整个搭建过程 注意: 本次实验OS为c ...

  10. asp查找</td>标记时遇到以外的文件结尾

    正确的<td></td> 错误的<td> 没有写完整