vue学习----v-on

最新推荐文章于 2022-07-17 09:51:22 发布

小东哥哥

最新推荐文章于 2022-07-17 09:51:22 发布

阅读量260

点赞数 1

分类专栏： vue学习

本文链接：https://blog.csdn.net/qq_42836176/article/details/88743731

版权

vue学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

v-on 使用

v-on 介绍

事件监听可以使用 v-on 指令。
通常情况下，我们需要使用一个方法来调用 JavaScript 方法。
v-on 可以接收一个定义的方法来调用。

入门代码

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue.js测试程序</title>
    <!--引入js类库-->
    <script src="vue.min.js"></script>
</head>
<body>
<div id="app">
    {{name}}
    <input type="text" v-model="num1">+
    <input type="text" v-model="num2">
    <!--= {{Number.parseInt(num1)+Number.parseInt(num2)}}-->
    <span  v-text="result"></span>
    <button v-on:click="change">计算</button>
</div>

</body>

<script>
    <!--编写  model  VM-->
    var VM = new Vue({
        el: '#app',
        data:{
            name: '加法运算',
            num1: 0,
            num2: 0,
            result: 0
        },
        methods:{
            change: function () {
              this.result = Number.parseInt(this.num1)+Number.parseInt(this.num2);
              alert(this.result)
            }
        }
    })

</script>

</html>

效果展示

在这里插入图片描述

小东哥哥

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue学习----v-on

v-on 使用v-on 介绍事件监听可以使用 v-on 指令。通常情况下，我们需要使用一个方法来调用 JavaScript 方法。v-on 可以接收一个定义的方法来调用。入门代码<!DOCTYPE html><html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"><head> &...
复制链接

扫一扫