文档章节

条件渲染

BK灬
 BK灬
发布于 2017/04/21 17:08
字数 393
阅读 62
收藏 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>

 

© 著作权归作者所有

共有 人打赏支持
BK灬

BK灬

粉丝 46
博文 343
码字总数 142562
作品 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
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
[译] React 实现条件渲染的多种方式和性能考量

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

卷头驴先生
07/06
0
0
parky/domTemplate

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

parky
2016/06/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周六乱弹 —— 到底谁是小公猫……

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @莱布妮子:分享Trivium的单曲《Throes Of Perdition》 《Throes Of Perdition》- Trivium 手机党少年们想听歌,请使劲儿戳(这里) @小鱼丁:...

小小编辑
37分钟前
36
1
基础选择器

注意:本教程参考自网上流传的李兴华老师的jquery开发框架视频,但是苦于没有相应的配套笔记,由我本人做了相应的整理. 本次学习的内容 学习jquery提供的各种选择器的使用,掌握了jquery选择...

江戸川
42分钟前
1
0
Spring中static变量不能@value注入的原因

今天本想使用@Value的方式使类中的变量获得yml文件中的配置值,然而一直失败,获得的一直为null。 类似于这样写的。 public class RedisShardedPool { private static ShardedJedisPool pool...

钟然千落
今天
2
0
CentOS7防火墙firewalld操作

firewalld Linux上新用的防火墙软件,跟iptables差不多的工具。 firewall-cmd 是 firewalld 的字符界面管理工具,firewalld是CentOS7的一大特性,最大的好处有两个:支持动态更新,不用重启服...

dingdayu
今天
1
0
关于组件化的最初步

一个工程可能会有多个版本,有国际版、国内版、还有针对各种不同的渠道化的打包版本、这个属于我们日常经常见到的打包差异化版本需求。 而对于工程的开发,比如以前的公司,分成了有三大块业...

DannyCoder
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部