Vue.js指令(v-on)绑定(DAY29)

  • v-on (事件绑定)

v-on是用来绑定event事件的指令,就像之前javascript介绍过的onclickonchange事件等,触发事件後,会呼叫相对应的函式或动作。
语法:<input type="button" value="button" v-on:事件名称="事件发生时的动作">
Ex:<input type="button" value="button" v-on:click="fun()">


Example

<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>

1. 新增第一则留言:

https://ithelp.ithome.com.tw/upload/images/20211010/20140225PCJNTuZxBx.png

2. 新增第二则留言:

https://ithelp.ithome.com.tw/upload/images/20211010/20140225jcswOGN0F4.png
补充:在上面的范例中看到了v-for这个属性,那是什麽呢?下一篇文章将会和大家介绍到喔!

结语

下一篇将会介绍其他vue指令:v-ifv-else-ifv-elsev-showv-on!


<<:  [Day27] 欺上暪下的主管厚黑学

>>:  POSIX Thread 介绍

CMoney第八届菁英软件工程师战斗营_Week 3

时间静悄悄的来到第三周 本周让我开始觉得撞墙期开始了 周一的手写考卷就考得不如意 被考试手写与上机...

[Day19] 与问题成员对话-案例一: 正弦哥

一旦团队系统开始上路运作,团队主管 / 开发系统架构师 / Scrum Master 的责任就是确保...

[NestJS 带你飞!] DAY17 - Injection Scopes

Nest 在大多数情况下是采用 单例模式 (Singleton pattern) 来维护各个实例,也...

Cotex-M55 首篇

ARM技术听前辈说是包山包海,想了好久才尘埃落定,决定下笔来写写去年才发布、有Helium向量处理技...

部落格怎麽进行搜寻引擎优化?

一、前言 很多人可能会觉得 SEO 优化是种单一的技巧,有一套可依循的 SOP,只要学会就可以操作...