v-on
是用来绑定event事件的指令,就像之前javascript介绍过的onclick
、onchange
事件等,触发事件後,会呼叫相对应的函式或动作。
语法:<input type="button" value="button" v-on:事件名称="事件发生时的动作">
Ex:<input type="button" value="button" v-on:click="fun()">
<head>
<style>
body {
text-align: center;
background-color: antiquewhite
}
#area2 {
padding: 6px 10px;
width: 50%;
height: 200px;
margin-bottom: 1em;
overflow-y: scroll;
border: 2px solid;
position: relative;
left: 25%;
background-color: azure;
font-size: x-large;
}
#area1 {
font-size: x-large;
}
</style>
<script>
const App = Vue.createApp({
data() {
return {
area1: '',
area2: []
}
},
methods: {
add() {
this.area2.push("user:" + this.area1);
this.area1 = '';
}
}
}).mount('#messagebox');
//使用v3版本
</script>
</head>
<body>
<h1>留言版</h1><hr />
<form id="messagebox">
<textarea id="area1" name="area" rows="10" cols="50" placeholder="在此留言!" v-model="area1" @keydown.enter="add"></textarea><br />
<!--v-model会将使用者输入的东西放入下面的留言区-->
<!--keydown.enter的意思是当按下键盘上的enter键会呼叫add()函式-->
<input type="button" value="新增留言" v-on:click="add" /><br />
<!--点击按钮时呼叫add()函式-->
<div id="area2">
<div v-for="message in area2">{{ message }}</div>
<!--使用v-for将vue实体中储存在data的area2资料显示出来-->
</div>
</form>
</body>
补充:在上面的范例中看到了v-for
这个属性,那是什麽呢?下一篇文章将会和大家介绍到喔!
下一篇将会介绍其他vue指令:v-if
、v-else-if
、v-else
、v-show
和v-on
!
时间静悄悄的来到第三周 本周让我开始觉得撞墙期开始了 周一的手写考卷就考得不如意 被考试手写与上机...
一旦团队系统开始上路运作,团队主管 / 开发系统架构师 / Scrum Master 的责任就是确保...
Nest 在大多数情况下是采用 单例模式 (Singleton pattern) 来维护各个实例,也...
ARM技术听前辈说是包山包海,想了好久才尘埃落定,决定下笔来写写去年才发布、有Helium向量处理技...
一、前言 很多人可能会觉得 SEO 优化是种单一的技巧,有一套可依循的 SOP,只要学会就可以操作...