毕设：week5-vue.js：事件（点击事件）

最新推荐文章于 2022-11-22 11:48:59 发布

cs_rookie

最新推荐文章于 2022-11-22 11:48:59 发布

阅读量123

点赞数

分类专栏：毕业设计毕设

本文链接：https://blog.csdn.net/qq_33516656/article/details/100069968

版权

毕设同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

毕业设计

10 篇文章 0 订阅

订阅专栏

一、点击事件
对于点击事件简单来说，就是通过点击按钮，从而引发一个事件，我们就叫点击事件。接下来我们通过一个例子来深入理解点击事件。
原理：我们需要做一个“日期的选择器”，通过点击按钮，会触发事件，从而对我们的日期进行选择。
index代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
   <!-- 将title改为vue.js -->
    <title>vue.js</title>
    <!-- 引入cli -->
    <script src="https://unpkg.com/vue"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- vue-app是根容器 -->
<div id="vue-app">
<h1 class="h1">个人信息修改</h1><hr>
<table class="table">
        <tr>
            <td>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：</td>
            <td><input type="text" value="yang"></td>
        </tr>
        <tr><td>性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：</td>
            <td><input type="text" value="女"></td>
            </tr>
        <tr><td>年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;龄：</td>
         <td><input type="text" value="18"></td></tr>
         <tr><td>出生日期：</td>
         <td>{{years}}年{{month}}月{{day}}日</td></tr>
         <tr class="table">
            <td><button v-on:click="years--">减少年份</button></td>//通过v-on:click来实现单击事件
            <td><button v-on:click="years++">增加年份</button></td>
            <td><button v-on:click="month++">增加月份</button></td>
            <td><button v-on:click="month--">减少月份</button></td>
            <td><button v-on:click="day++">增加天数</button></td>
            <td><button v-on:click="day--">减少天数</button></td>
         <tr><td>学历：</td>
         <td><input type="text" value="硕士研究生"></td></tr>
         <tr><td>毕业学校：</td>
         <td><input type="text" value="清华大学"></td></tr>
        <tr><td style="text-align:center"><a href="index.html" title=""><button type="button">取消</button></a></td>
        <td style="text-align:center"><a href="login.html" title=""><button type="button">提交</button></td></tr>

</tr>

</table>
</div>
<!-- 引入一个script,独立出一个app.js文件 -->
<script src="app.js"></script>
</body>
</html>

app.js代码：

//实例化vue对象
new Vue({

    el:"#vue-app",
    data:{
        years:2019,
        month:9,
        day:1,
    },
    methods:{

        }

});
//el: element 需要获取的元素,一定是html中的跟容器元素
//data:用于数据的存储
//methods:用于存储各种方法

style.css代码：

.h1{
    text-align: center;
}
.h2{
    text-align:center;
}
.table{
    margin-left: 550px;
    border: 2px solid black;

}
.body{
    background:#483D8B;
}
.lgh1{

    color: white;
    text-align: center;
}
.button{
    width: 40px;
    height: 60px;
}

以上代码实现了，当点击按钮时，就会触发相应德事件，我们是通过v-on:click方法来实现点击事件德实现
在这里插入图片描述 Try to best yourself!