文档章节

列表渲染

AK灬
 AK灬
发布于 2017/04/21 17:12
字数 531
阅读 11
收藏 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>

 

© 著作权归作者所有

共有 人打赏支持
AK灬

AK灬

粉丝 46
博文 343
码字总数 142342
作品 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

没有更多内容

加载失败,请刷新页面

加载更多

下一页

7 个致命的 Linux 命令

导读 如果你是一个 Linux 新手,在好奇心的驱使下,可能会去尝试从各个渠道获得的命令。以下是 7 个致命的 Linux 命令,轻则使你的数据造成丢失,重则使你的系统造成瘫痪,所以,你应当竭力避...

问题终结者
59分钟前
0
0
设计模式:工厂方法模式(工厂模式)

工厂方法模式才是真正的工厂模式,前面讲到的静态工厂模式实际上不能说是一种真正意义上的设计模式,只是一种变成习惯。 工厂方法的类图: 这里面涉及到四个种类: 1、抽象产品: Product 2、...

京一
今天
0
0
区块链和数据库,技术到底有何区别?

关于数据库和区块链,总会有很多的困惑。区块链其实是一种数据库,因为他是数字账本,并且在区块的数据结构上存储信息。数据库中存储信息的结构被称为表格。但是,区块链是数据库,数据库可不...

HiBlock
今天
0
0
react native 开发碰到的问题

react-navigation v2 问题 问题: static navigationOptions = ({navigation, navigationOptions}) => ({ headerTitle: ( <Text style={{color:"#fff"}}>我的</Text> ), headerRight: ( <View......

罗培海
今天
0
0
Mac Docker安装流程

久仰Docker大名已久,于是今天趁着有空,尝试了一下Docker 先是从docker的官网上下载下来mac版本的docker安装包,安装很简易,就直接拖图标就好了。 https://www.docker.com/products/docker...

writeademo
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部