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. zookeeper知识点学习

    单机模式配置: Zookeeper 的启动脚本在 bin 目录下,Linux 下的启动脚本是 zkServer.sh 在你执行启动脚本之前,还有几个基本的配置项需要配置一 下,Zookeeper 的配 ...

  2. (转) python学习笔记6--fraction

    原文:https://blog.csdn.net/lemonwyc/article/details/37592883 fraction模块提供有关有理数的算术表达和计算,实际上就是分数的表达和计算.p ...

  3. python中range、xrange和randrange的区别

    range 函数说明:range([start,] stop[, step]),根据start与stop指定的范围以及step设定的步长,生成一个列表. xrange 函数说明:和range 的用法完 ...

  4. 巧用border特性实现聊天气泡效果

    利用border特性,实现三角形,很简单,我们直接看效果: html: <div class="bubble-container ">你好么 <div class ...

  5. http编程（一）使用javaAPI实现

    Java Http编程中常见的实现方式是使用Java 提供的API,另外就是使用Apache提供的 API 1.通过Java提供的API实现Http编程 类:URL:类 URL 代表一个统一资源定位符 ...

  6. 全网最详细的跑python2.7时出现from mysql import connector ImportError: No module named mysql的问题解决办法（图文详解）

    不多说,直接上干货! C:\Users\lenovo>pip install mysql-connector-python-rf== Collecting mysql-connector-pyt ...

  7. ES6-Array

    /* * 数组解构赋值: * ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这种被称为解构. * 示例如下: */ var [a,b,c] = [1,2,3]; console.log ...

  8. Chapter 3 Phenomenon——16

    "Your X-rays look good," he said. "Does your head hurt? Edward said you hit it pretty ...

  9. Mongodb同步数据到hive（二）

    Mongodb同步数据到hive(二) 1.            概述 上一篇文章主要介绍了mongodb-based,通过直连mongodb的方式进行数据映射来进行数据查询,但是那种方式会对线上的 ...

  10. 触摸UITextView找到该触摸点的文字

    参加了一个比赛有一道题是如标题一样,在UITextView上触摸找到该触摸点对应的文字,比赛也可以查资料,当时做的时候就是抱着玩玩的心态试试也没认真做,就没查就去吃饭去了,昨晚下班回去在思考这个问题发 ...