06阻止默认事件，v-model与form表单

.stop是阻止默认事件， .once是只执行一次
默认事件是从内由外

<div id="app">
			<button>点击隐藏</button>
			<div @click.once="fn">div标签
				<p @click.stop.once="fn">p标签
					<a @click.stop.once="fn($event)">a标签</a>
				</p>
			</div>
		</div>
		<script type="text/javascript">
			var app=new Vue({
				el:"#app",
				data:{
					show:false,
					count:0
				},
				methods:{
					fn:function(event){
						console.log(event.target.tagName);
					}
				}
			})
		</script>
		<!--**********************-->
			<style type="text/css">
			.show{
				width: 200px;height: 200px;
				background-color: gray;
			}
		</style>

		<div id="app">
			<!--<button type="button" v-on:click="show=!show">显示隐藏按钮</button>-->
			<button type="button" @click="count++">显示隐藏按钮</button>
			<!--<div class="show" v-if="show">
				这是div
			</div>-->
			<div >{{count}}</div>
			<!--判断显示（渲染）哪一个-->
			<!--<p v-if="show">如果show是true</p>
			<p v-else>如果show是false</p>-->
			
			<!--<p v-if="name==='张三'">这是张三</p>
			<p v-else-if="name==='李四'">这是李四</p>
			<p v-else="name==='王五'">这是王五</p>-->
			
			<!--阻止默认事件.stop阻止冒泡事件-->
			<div @click="fn">div标签
				<p @click.stop="fn">p标签
					<a @click.stop="fn($event)">a标签</a>
				</p>
			</div>
			
		</div>
		
		<script type="text/javascript">
			var app=new Vue({
				el:"#app",
				data:{
					show:true,
					name:"李四",
					count:0
				},
				methods:{
					fn:(event)=>{
						console.log(event.target.tagName);
					}
//					fn:function(event){
//						console.log(event.target.tagName);
//					}
				}
			})
		</script>

v-model的应用
v-model.lazy，v-model.number，v-model.trim

<div id="app">
			<!--双向同步-->
			<input type="checkbox" v-model="checked" />{{checked}}<br />
			请选择你的爱好：
			<input type="checkbox" value="吃饭" v-model="checkedname" />吃饭
			<input type="checkbox" value="睡觉" v-model="checkedname" />睡觉
			<input type="checkbox" value="打豆豆" v-model="checkedname" />打豆豆
			<input type="checkbox" value="打游戏" v-model="checkedname" />打游戏
			<!--多选用数组同步选中的数据-->
			{{checkedname}}<br />
			性别：
			<input type="radio" value="男" name="sex" v-model="sex" />男
			<input type="radio" value="女" name="sex" v-model="sex" />女
			<!--单选用数组同步选中的数据-->
			{{sex}}<br />
			下拉列表：
			<select v-model="selected" multiple="multiple">
				<option value="苹果">苹果</option>
				<option value="梨子">梨子</option>
				<option value="葡萄">葡萄</option>
				<option value="橘子">橘子</option>
			</select>
			<!--下拉列表同步获取-->
			{{selected}}<br />
			<!--转为在 change 事件_之后_进行同步-->
			<input type="text" v-model.lazy="txt"/>{{txt}} <br />
			<!--只能写数字-->
			<input type="text" v-model.number="age"/>{{age}} <br />
			<!--去除首尾空格-->
			<input type="text" v-model.trim="name"/>{{name}} <br />
		</div>
		<script type="text/javascript">
			var app=new Vue({
				el:"#app",
				data:{
					checked:false,
					checkedname:[],
					sex:'',
					selected:'',
					txt:'',
					age:0,
					name:""
				}
			})
		</script>

最后

以上就是秀丽灰狼为你收集整理的06阻止默认事件，v-model与form表单的全部内容，希望文章能够帮你解决06阻止默认事件，v-model与form表单所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。