文档章节

条件渲染

AK灬
 AK灬
发布于 2017/04/21 17:08
字数 393
阅读 56
收藏 0
<html>
	<head>
		<title>VUE.JS实例</title>
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<script src="C:/Users/Administrator/Desktop/jar/jquery-1.11.2.min.js"></script>
	</head>
	<body>
		<!-- 条件渲染 -->
		<h1 v-if="ok">YES</h1>
		<h1 v-else>NO<h1>
		<!-- template-->
		<template v-if = "ok">
			<h1>Title</h1>
			<p>Paragraph1</p>
			<p>Paragraph2</p>
		</template>
		<!-- v-else -->
		<!-- v-else 元素必须紧跟在 v-if 或者 v-else-if 元素的后面——否则它将不会被识别。-->
		<div v-if = "Math.random()>0.5">
			Now you see me!
		</div>
		<div v-else>
			Now you don't me!
		</div>
		<!-- v-else-if -->
		<div v-if="type === 'A'">
			A
		</div>
		<div v-else-if="type === 'B'">
			B
		</div>
		<div v-else-if="type === 'C'">
			C
		</div>
		<div v-else>
			Not A/B/C
		</div>
		<!-- KEY管理可复用的元素 -->
		<div id="key-example">
			<template v-if="loginType === username">
				<label> Username</label>
				<input placeholder="Enter Your Username" key="usernamei-input"></input>
			</template>
			<template v-else>
				<label>Email</label>
				<input placeholder="Enter Your Email Address" key="email-input"></input>
			</template>
			<button v-on:click="toggleLoginType">Change</button>
		</div>
		<h1 v-show="ok">Hello!</h1>
		<!-- 列表渲染 -->
		<ul id="example-1">
			<li v-for="item in items">
				{{item.message}}
			</li>
		</ul>
		<ul id="example-2">
		  <li v-for="(item, index) of items">
			{{ parentMessage }} - {{ index }} - {{ item.message }}
		  </li>
		</ul>
		<ul id="example-3">
		  <template v-for="item in items">
			<li>{{ item.msg }}</li>
			<li class="divider">空白行</li>
		  </template>
		</ul>
		<div id="example-4">
		  <span v-for="n in 10">{{ n }}</span>
		</div>
		<div id="todo-list-example">
		  <input
			v-model="newTodoText"
			v-on:keyup.enter="addNewTodo"
			placeholder="Add a todo"
		  >
		  <ul>
			<li
			  is="todo-item"
			  v-for="(todo, index) in todos"
			  v-bind:title="todo"
			  v-on:remove="todos.splice(index, 1)"
			></li>
		  </ul>
		</div>
		<script>
			new Vue({
			  el: '#key-example',
			  data: {
				loginType: 'username'
			  },
			  methods: {
				toggleLoginType: function () {
				  return this.loginType = this.loginType === 'username' ? 'email' : 'username'
				}
			  }
			});
			var example1 =  new Vue({
				el : '#example-1',
				data : {
					items : [
						{message : '吃饭'},
						{message : '睡觉'},
						{message : '洗澡'},
					]
				}
			});
			var example2 = new Vue({
			  el: '#example-2',
			  data: {
				parentMessage: 'Parent',
				items: [
				  { message: 'Foo' },
				  { message: 'Bar' }
				]
			  }
			});
			var example3 = new Vue({
				el: '#example-3',
				data: {
				parentMessage: 'Parent',
				items: [
				  { msg: 'Foo' },
				  { msg: 'Bar' }
				]
			  }
			});
			var example4 = new Vue({
				el : '#example-4',
			});
			Vue.component('todo-item', {
			template: '\
				<li>\
				  {{ title }}\
				  <button v-on:click="$emit(\'remove\')">X</button>\
				</li>\
			  ',
			  props: ['title']
			})
			new Vue({
			  el: '#todo-list-example',
			  data: {
				newTodoText: '',
				todos: [
				  'Do the dishes',
				  'Take out the trash',
				  'Mow the lawn'
				]
			  },
			  methods: {
				addNewTodo: function () {
				  this.todos.push(this.newTodoText)
				  this.newTodoText = ''
				}
			  }
			})
		</script>
	</body>
</html>

 

© 著作权归作者所有

共有 人打赏支持
AK灬

AK灬

粉丝 46
博文 343
码字总数 142342
作品 0
朝阳
后端工程师
v-if条件渲染和v-show

1、 如果v-if里面的变量ok为真,就渲染这个节点 2、 元素必须紧跟在带 或者 的元素的后面,否则它将不会被识别。 ,顾名思义,充当 的“else-if 块”,可以连续使用: 3、另一个用于根据条件...

Carbenson
02/07
0
0
精读《React 八种条件渲染》

1 引言 本期精读的文章是:8 React conditional rendering methods 介绍了八种 React 条件渲染方式。 模版条件渲染非常常见,遇到的时候往往会随机选择一种方式使用,那么怎么写会有较好的维...

黄子毅
06/19
0
0
[译] React 实现条件渲染的多种方式和性能考量

原文地址:8 React conditional rendering methods 原文作者:Esteban Herrera 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m… 译者:Dong Han 校对者:Jessica Shao,doc...

卷头驴先生
07/06
0
0
vue中track-by的理解

api:http://cn.vuejs.org/guide/list.html#track-by 示例地址:https://jsfiddle.net/stardew/f1eju0ku/5/ 无track-by情况:数据修改时,无论值是否被修改,dom都被重新渲染(控制台可以看到...

littledew
2016/10/25
165
3
parky/domTemplate

domTemplate.js 一个非侵入式、不会破坏原来静态页面结构、可被浏览器正确显示的、格式良好的前端HTML模板解析引擎。彻底实现前后端分离,让后端专注业务的处理。 ####Demo http://parky18....

parky
2016/06/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

最全最强解析:支付宝钱包系统架构内部剖析(架构图)

支付宝系统架构概况 典型处理默认 资金处理平台 财务会计 支付清算 核算中心 交易 柔性事务 支付宝的开源分布式消息中间件–Metamorphosis(MetaQ) Metamorphosis (MetaQ) 是一个高性能、高可...

晨猫
40分钟前
5
0
竞品分析

那什么样的场景需要用关键纬度分析法分析竞品呢? 竞品分析的目的是为了看竞品们和自己产品重合的业务都具备哪些功能点,以及这些功能是怎么做的,以此确定自己产品的优化方向。 竞品们的业务...

于谦老师
47分钟前
1
0
OSChina 周三乱弹 —— 公司女同事约我

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @莱布妮子:分享水木年华的单曲《蝴蝶花(2002年大提琴版)》 《蝴蝶花(2002年大提琴版)》- 水木年华 手机党少年们想听歌,请使劲儿戳(这里) ...

小小编辑
今天
1K
17
Linux环境搭建 | VMware下共享文件夹的实现

在进行程序开发的过程中,我们经常要在主机与虚拟机之间传递文件,比如说,源代码位于虚拟机,而在主机下阅读或修改源代码,这里就需要使用到 「共享文件」 这个机制了。本文介绍了两种共享文...

良许Linux
今天
9
0
JUC锁框架——AQS源码分析

JUC锁介绍 Java的并发框架JUC(java.util.concurrent)中锁是最重要的一个工具。因为锁,才能实现正确的并发访问。而AbstractQueuedSynchronizer(AQS)是一个用来构建锁和同步器的框架,使用A...

长头发-dawn
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部