Vue模板语法下_vue 隐藏域-CSDN博客

本文链接：https://blog.csdn.net/xyy_0517/article/details/121096755

一，样式绑定

1、 class绑定

使用方式：v-bind:class="expression"
expression的类型：字符串、数组、对象

2 、style绑定

v-bind:style="expression"
expression的类型：字符串、数组、对象

效果：将字体变红色变大
注意：变量名不能取中划线，还要区分空格位置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<style>
			.f200{
				font-size: 180px;
			}
			 
			
		</style>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="xyy">
			<h3 :class="f200" v-bind:style="colorred">{
  {msg}}</h3>
		 
		
		</div>
	</body>
	<script type="text/javascript">
		// 绑定边界  es6具体体现
		new Vue({
			el: '#xyy',
			data() {
				return {
					msg: '喜洋洋用洗衣液',
					colorred: 'color: red;',
					f200:'f200'
				};
			},
			 
		})
	</script>
</html>

二，事件处理器

1、冒泡事件

在HBuilder X软件中按此格式输入

.red>.orange>.blue>.black2.

最后按Tab键，就会呈现出以下的层次结构：

<div class="red">
<div class="orange">
<div class="blue">
<div class="black"></div>
</div>
</div>
</div>

2，事件修饰符

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>



<a v-on:click.once="doThis"></a>

3、按键修饰符

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

Vue为最常用的按键提供了别名

<input v-on:keyup.enter="submit">

全部的按键别名：

.enter .tab .delete (捕获 "删除" 和 "退格" 键) .esc .space .up .down .left

.right .ctrl .alt .shift .meta

4.冒泡事件&提交答案（实例操作）

<!DOCTYPE html>
<html>
	<head>
		<meta charset=