Vue模板语法下集

最新推荐文章于 2023-03-09 17:00:00 发布

VIP文章 xhha

最新推荐文章于 2023-03-09 17:00:00 发布

阅读量147

点赞数

文章标签： Vue模板语法下集

本文链接：https://blog.csdn.net/linyaodonga/article/details/101014255

版权

Vue模板语法下集

1 . 样式绑定
1.1 class绑定
使用方式：v-bind:class=“expression”
expression的类型：字符串、数组、对象

1.2 style绑定
v-bind:style=“expression”
expression的类型：字符串、数组、对象

2 . 事件处理器
事件监听可以使用v-on 指令
2.1 事件修饰符 qazwsxedc.
Vue通过由点(.)表示的指令后缀来调用修饰符，

stop
      .prevent
      .capture
      .self
      .once 
 
      <!-- 阻止单击事件冒泡 -->
      <a v-on:click.stop="doThis"></a>
      <!-- 提交事件不再重载页面 -->
      <form v-on:submit.prevent="onSubmit"></form>
      <!-- 修饰符可以串联  -->
      <a v-on:click.stop.prevent="doThat"></a>
      <!-- 只有修饰符 -->
      <form v-on:submit.prevent></form>
      <!-- 添加事件侦听器时使用事件捕获模式 -->
      <div v-on:click.capture="doThis">...</div>
      <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
      <div v-on:click.self="doThat">...</div>
      <!-- click 事件只能点击一次 -->
      <a v-on:click.once="doThis"></a>

2.2 按键修饰符
Vue允许为v-on在监听键盘事件时添加按键修饰符：

  <!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
      <input v-on:keyup.13="submit">

      Vue为最常用的按键提供了别名
      <!-- 同上 -->
      <input v-on:keyup.enter="submit">

      全部的按键别名：
      .enter
      .tab
      .delete (捕获 "删除" 和 "退格" 键)
      .esc
      .space
      .up
      .down
      .left
      .right
      .ctrl
      .alt
      .shift
      .meta

样式绑定.html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<title></title>
	</head>
	<style>
		.a{
			background-color: greenyellow;
		}
		.b{
			background-color: red;
		}
		.c{
			font-size: 60px;
		}
		div{
			padding: 25px;
		}
	</style>

	<body>
		<!-- vue所管理的边界 -->
		<div id="app">
			<ul>
				<li>
					<h3>样式绑定</h3>
					<span :class="aclz">我林耀东怕过谁</span>
					<span :class="bclz">我，李维明</span>
				</li>
				<li>
					<h3>事件冒泡</h3>
					<div style="width: 300px; height: 300px; background-color: #ADFF2F;" @click="d">
						<div style="width: 200px; height: 200px; background-color: red;" @click="c">
							<div style="width: 100px; height: 100px; background-color: gold;" @click="b">
								<div style="wi

最低0.47元/天解锁文章

xhha

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue模板语法下集

Vue模板语法下集1 . 样式绑定1.1 class绑定使用方式：v-bind:class=“expression”expression的类型：字符串、数组、对象1.2 style绑定v-bind:style=“expression”expression的类型：字符串、数组、对象2 . 事件处理器事件监听可以使用v-on 指令2.1 事件修饰符 qazwsxedc.Vu...
复制链接

扫一扫