列表渲染
列表渲染
低调的AckMan 发表于10个月前
列表渲染
  • 发表于 10个月前
  • 阅读 11
  • 收藏 0
  • 点赞 0
  • 评论 0

新睿云服务器60天免费使用,快来体验!>>>   

<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>

 

标签: Vue.js
  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
低调的AckMan
粉丝 44
博文 317
码字总数 134757
×
低调的AckMan
谢谢观众老爷们的赏赐,小弟我会再接再厉的!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: