vue基础语法2

最新推荐文章于 2022-12-27 18:21:53 发布

洪荒895

最新推荐文章于 2022-12-27 18:21:53 发布

阅读量326

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/qq_64230952/article/details/124474919

版权

样式绑定

Vue.js v-bind 在处理 class 和 style 时，专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。

<style>
		.cl{
			font-weight: 100;
			font-weight: 100;
		}
		.cl1{
			color: aqua;
		}
	</style>
	<body>
		<div id="app">
			{
  {ts}}
			<!--class样式-->
			<div :class='clsArrs'>
				样式样式样式样式
			</div>
			<div :style='clsObj'>
				样式样式样式样式
			</div>
		</div>
	</body>
    <script>
		new Vue({
			el:'#app',
			data:{
				ts:new Date().getTime(),
				cls:'cl',
				clsArrs:['cl','cl1'],
				clsObj:{
					color:'green',
					fontSize: '100',
					fontWeight: '100'
				}
			}
		})
	</script>

按键修饰符

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

表单修饰符：

lazy：在我们填完信息，光标离开标签的时候，才会将值赋予给value，也就是在change事件之后再进行信息同步

<input type="text" v-model.lazy="value">
<p>{
  {value}}</p>

trim：自动过滤用户输入的首空格字符，而中间的空格不会过滤

<input type="text" v-model.trim="value">

number：自动将用户的输入值转为数值类型，但如果这个值无法被parseFloat解析，则会返回原来的值

事件修饰符

stop：阻止了事件冒泡，相当于调用了event.stopPropagation方法

<div @click="shout(2)">
  <button @click.stop="shout(1)">ok</button>
</div>
//只输出1

prevent：阻止了事件的默认行为，相当于调用了event.preventDefault方法

<form v-on:submit.prevent="onSubmit"></form>

self：只当在 event.target 是当前元素自身时触发处理函数

<div v-on:click.self="doThat">...</div>

once：绑定了事件以后只能触发一次，第二次就不会触发

<button @click.once="shout(1)">ok</button>

capture：使事件触发从包含这个元素的顶层开始往下触发

<div @click.capture="sh

最低0.47元/天解锁文章

洪荒895

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue基础语法2

样式绑定Vue.js v-bind 在处理 class 和 style 时，专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。<style> .cl{ font-weight: 100; font-weight: 100; } .cl1{ color: aqua; } </style> <body> <div id="app"> {{ts}} <!--class样式--..
复制链接

扫一扫