文档章节

列表渲染

BK灬
 BK灬
发布于 2017/04/21 17:12
字数 531
阅读 12
收藏 0
<html>
	<head>
		<title>事件处理器</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>
		<!-- 监听事件 -->
		<div id="example1">
			<p>点击数:{{counter}}</p>
			<button v-on:click="counter+=1">点击1次增加1</button>
		</div>
		<!-- 方法事件处理器 -->
		<div id="example2">
			<button v-on:click="handle">Handle</button>
		</div>
		<!-- 内联处理器方法 -->
		<div id="example3">
			<button v-on:click="hello('Jon')">Hello Jon</button>
			<button v-on:click="hello('San')">Hello San</button>
		</div>
		<!-- 表单控件绑定 -->
		<div id="result1">
			<input v-model.trim="message" placeholder="Input Your Content"></input>
			<p>Messagge is {{message}}</p>
		</div>
		<!-- 单个复选框 -->
		<div id="result2">
			<input type="checkbox" id="checkbox" v-model="checked">
			<label for="checkbox">{{checked}}</label>
		</div>
		<!-- 复选框 -->
		<div id="result3">
			<!--for属性规定label与哪个表单元素绑定.当点击label时,光标就会聚焦在绑定的input上-->
			<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
			<label for="jack">Jack</label>
			<input type="checkbox" id="john" value="John" v-model="checkedNames">
			<label for="john">John</label>
			<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
			<label for="mike">Mike</label>
			<br>
			<span>Checked names: {{ checkedNames }}</span>
		</div>
		<!-- 单选框 -->
		<div id="result4" class="demo">
		  <input type="radio" id="one" value="One" v-model="picked">
		  <label for="one">One</label>
		  <br>
		  <input type="radio" id="two" value="Two" v-model="picked">
		  <label for="two">Two</label>
		  <br>
		  <span>Picked: {{ picked }}</span>
		</div>
		<!-- 单选列表 -->
		<div id="result5" class="demo">
			<select v-model="selected">
				<option>A</option>
				<option>B</option>
				<option>C</option>
			</select>
			<span>Selected:{{selected}}</span>
		</div>
		<!-- 多选列表 -->
		<div id="result6" class="demo">
		  <select v-model="selected" multiple style="width: 50px">
			<option>A</option>
			<option>B</option>
			<option>C</option>
		  </select>
		  <br>
		  <span>Selected: {{ selected }}</span>
		</div>
		<!-- 动态选相 -->
		<div id="result7">
			<select v-model="selected">
			  <option v-for="option in options" v-bind:value="option.value">
				{{ option.text }}
			  </option>
			</select>
			<span>Selected: {{ selected }}</span>
		</div>
		<!-- 组件 -->
		<div id="component1">
			<my-component></my-component>
		</div>
		<div id="example">
			<my-component></my-component>
		</div>
		<script>
			var example1 =	new Vue({
				el : '#example1',
				data : {
					counter : 0
				}
			});
			var example2 = new Vue({
				el : '#example2',
				data : {name : 'Handle'},
				methods : {
					handle : function(){
						// `this` 在方法里指当前 Vue 实例
						alert('Hello' + this.name +'!');
						// `event` 是原生 DOM 事件
						// alert(event.target.tagName)
					}
				}
			});
			var example3 = new Vue({
				el : '#example3',
				methods : {
					hello : function(message){
						alert('Hello ' + message);
					}
				}
			});
			var result1 = new Vue({
				el : '#result1',
				data : {message : ''}
			});
			var result2 = new Vue({
				el : '#result2',
				data : {
					checked : 'true'
				}
			});
			var result3 = new Vue({
				el : '#result3',
				data : {checkedNames : []}
			});
			var result4 = new Vue({
				el : '#result4',
				data : {picked : ''}
			});
			var result5 = new Vue({
				el : '#result5',
				data : {selected : ''}
			});
			var result6 = new Vue({
				el : '#result6',
				data : {selected : []}
			});
			var result7 = new Vue({
				el: '#result7',
				data: {
					selected: 'A',
					options: [
					  { text: 'One', value: 'A' },
					  { text: 'Two', value: 'B' },
					  { text: 'Three', value: 'C' }
					]
				  }
			});
			// 1.组件注册
			Vue.component('my-component',{
				template : '<h1>component</h1>'
			});
			// 2.创建根实例
			new Vue({
				el : '#component1'
			});
		</script>
	</body>
</html>

 

© 著作权归作者所有

共有 人打赏支持
上一篇: Java使用MongoDB
下一篇: 条件渲染
BK灬

BK灬

粉丝 46
博文 343
码字总数 142562
作品 0
朝阳
后端工程师
私信 提问
在React项目中,如何优雅的优化长列表

  对于较长的列表,比如1000个数组的数据结构,如果想要同时渲染这1000个数据,生成相应的1000个原生dom,我们知道原生的dom元素是很复杂的,如果长列表通过生成如此多的dom元素来实现,很...

yuxiaoliang
12/03
0
0
HWUI(硬件加速绘制UI)简介

原址 简介:hwui主要是android用于2d硬件绘图而加入的一个模块,在hwui之前,android主要是用skia来进行软件绘制,后由于绘制性能等问题,现在android的绘图几乎都是使用了hwui硬件加速绘图。...

u010164190
04/27
0
0
React Native 的 ListView 性能问题已解决

长列表或者无限下拉列表是最常见的应用场景之一。RN 提供的 ListView 组件,在长列表这种数据量大的场景下,性能堪忧。而在最新的 0.43 版本中,提供了 FlatList 组件,或许就是你需要的高性...

穿越过来的键盘手
07/10
0
0
OpenGL超级宝典笔记——显示列表

前言 在先前的章节中,我们已经讨论OpenGL基本的一些渲染技术。这些基本的技巧足够渲染简单的图像,然而在渲染精细的画面逼真的画面的时候(非常多的顶点和纹理),如果使用之前的方式渲染(...

Mario_Q
2013/12/15
0
2
关于微信小程序开发wx:key字段标签的理解

这几天在研究微信小程序,看到官方文档里的列表渲染中wx:key字段,官方文档如下 如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如...

暮色里的夜
01/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

网站老被劫持快照跳转怎么办

最近很多公司的网站被劫持跳转到了bo彩、cai票网站上去,客户从百度点击进去会跳转,直接输入网站的域名不会跳转,网站快照也被劫持成bo彩的内容,site查看网站在百度的收录也出现问题,收录...

网站安全
4分钟前
0
0
给自己灌鸡汤

前言 看极客时间的《数据结构与算法之美》,中间有一篇文章是在说怎么坚持学习的,摘抄一些片段过来,激励自己。 https://time.geekbang.org/column/article/69607 致使你掉队的原因 一个人在...

grace_233
6分钟前
0
0
如何在网络视听行业建一扇内容安全大门?

在人工智能飞速发展的三年里,整个网络视听产业数字化发展速度非常迅猛。大数据作为如今这个时代的产物,正不断推动整个产业的发展。网络视听行业中存在海量的数据,比如视频内容、视频浏览量...

阿里云官方博客
16分钟前
0
0
云安全简史

课程介绍: DT时代我们每个人的生活在不知不觉中与云计算发生了千丝万缕的联系,起床、吃饭、出行、社交、工作、娱乐、购物等大多数应用都在云上,然而安全事件频发时刻在为我们敲响警钟,面对...

mcy0425
17分钟前
1
0
数字IT基础-数据采集总线

摘要: 日志服务是阿里自产自用的产品,在双十一、双十二和新春红包期间承载阿里云/蚂蚁全站、阿里电商板块、云上几千商家数据链路,每日处理来自百万节点几十PB数据,峰值流量达到每秒百GB,...

阿里云云栖社区
20分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部