文档章节

列表渲染

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>

 

© 著作权归作者所有

共有 人打赏支持
BK灬

BK灬

粉丝 46
博文 343
码字总数 142562
作品 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
一踩一个准之Markdown

Markdown是一个轻量级的文本标记语言,通过简单直观的语法,追求编辑时的酣畅淋漓和阅读时的美观大方。MD设计的初衷主要为以下三点: 纯文本的文件易于保存和传输,跨平台支持好; 通过一些有意...

tamlok
2017/04/17
0
0
微信小程序 Markdown 渲染库--WeMark

wemark 微信小程序Markdown渲染库 背景和功能 用于在小程序中渲染Markdown文本。 众所周知,Markdown的渲染一般需要解析成HTML来渲染。然而小程序并没有提供HTML渲染的功能,甚至连利用JS动态...

TooBug
2016/12/12
4.6K
3

没有更多内容

加载失败,请刷新页面

加载更多

Java程序员的书籍清单

我自己一路来,看过的书籍,都是经典,我自己也在不断地回溯,在这里分享给大家(排名不分先后,这里仅仅是我自己购买这些书籍的时间顺序排列): 《高效程序员的45个习惯 敏捷开发修炼之道》...

ChinaHYF
28分钟前
1
0
DeepMind 开源图神经网络的代码

用于支持论文《Relational inductive biases, deep learning, and graph networks》。 github A graph network takes a graph as input and returns a graph as output. The input graph has......

shengjuntu
50分钟前
2
0
python2编码详解、一

以前使用python3没觉的什么,跟着公司使用python2后被编码问题折磨的痛不欲生,好好研究了一下编码问题,参考了很多博文,加入自己的理解,这里只是对编码的介绍,下一篇是python2中编码问题...

hc321
58分钟前
2
0
基于OpenSSL的一些常用加密签名算法

目前包括:MD5、SHA512、DES、RSA加解密、RSA+MD5签名验证算法,在openssl基础上再进行封装,使用简单,头文件需要包含openssl库,可以使用vcpkg自动管理,省去繁琐的配置工程的过程。 该RSA...

LoSingSang
今天
1
0
spring Data JPA

什么是JPA? 全称Java Persistence API,可以通过注解或者XML描述【对象-关系表】之间的映射关系,并将实体对象持久化到数据库中。 为我们提供了: 1)ORM映射元数据:JPA支持XML和注解两种元...

狼王黄师傅
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部