Vue学习与使用--学习1.3

最新推荐文章于 2024-12-30 15:20:57 发布

原创最新推荐文章于 2024-12-30 15:20:57 发布 · 356 阅读

CC 4.0 BY-SA版权

按键修饰符
在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符。
keyup.enter：按回城键触发

<input v-on:keyup.enter="方法">
或者
<input @keyup.enter="方法">

还有如下修饰键
.ctrl
.alt
.shift
.meta(注意：在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。)
可以配合ascii来使用

<input @keyup.alt.67="方法">

67在ascii是c，所有alt+c就可以触发方法。

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<!--本人亲自测了一下，ctrl+alt或者ctrl+shift也会触发，但是ctrl+其他键就不会-->
<button @click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>

鼠标按钮修饰符
.left：鼠标左键触发
.right：鼠标右键触发
.middle：鼠标中间滚轮键触发
表单输入绑定
v-model指令在表单、及元素上创建双向数据绑定。会根据控件类型自动选取正确的方法来更新元素。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

<div id="demo">
<input v-model="message"/>
<br />
 <p>输入的内容为：{{message}}</p>
</div>
	</body>
	<script>
		var vue = new Vue({
			el:"#demo",
			data:{
				message:''
			}
		})
	</script>

结果：
在这里插入图片描述
对于radio

<body>
		<div id="demo">
			<input type="radio"  v-model="picked" value="one"> 
			<label>One</label>
			<br>
			<input type="radio" v-model="picked" value="two">
			<label>Two</label>
			<br>
			<span>Picked: {{ picked }}</span>
		</div>
	</body>
	<script>
		var vue = new Vue({
			el: "#demo",
			data: {
				picked: ''
			}
		})
	</script>

结果：
在这里插入图片描述
不在需要同一个name来实现单个选择的效果。
对于选择框

<body>
	<div id="demo">
		<select v-model="selected">
			<option disabled value="">请选择</option>
			<option>A</option>
			<option>B</option>
			<option>C</option>
		</select>
		<span>Selected: {{ selected }}</span>
	</div>
	</body>
	<script>
		var vue = new Vue({
			el: "#demo",
			data: {
				selected: ''
			}
		})
	</script>

结果：
在这里插入图片描述
如果 v-model 表达式的初始值未能匹配任何选项，元素将被渲染为“未选中”状态。在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。因此，更推荐像上面这样提供一个值为空的禁用选项。
使用用 v-for 渲染的动态选项：

<body>
		<div id="demo">
			<select v-model="selected">
				<option v-for="option in options" v-bind:value="option.value">
					{{ option.text }}
				</option>
			</select>
			<span>Selected: {{ selected }}</span>
		</div>
	</body>
	<script>
		var vue = new Vue({
			el: "#demo",
			data: {
				selected: 'A',
				options: [{
						text: 'One',
						value: 'A'
					},
					{
						text: 'Two',
						value: 'B'
					},
					{
						text: 'Three',
						value: 'C'
					}
				]
			}
		})
	</script>

结果:
在这里插入图片描述