vue事件实例

我不是女神ヾ 2022-02-04 01:35 234阅读 0赞

#### 一、功能 ####

1、界面显示一个段落，文字是”我是一个段落“；  
2、点击该段落，文字变为”我被点击了“

#### 二、实现 ####

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>事件</title>
        
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    </head>
    <body>
        <div id="mydiv">
            <p @click="changecontent()">{
       {content}}</p>
        </div>
        <script>
            new Vue({
                el:"#mydiv",
                data:{
                    content:"这是一个段落"
                },
                methods:{
                    changecontent:function () {
                        this.content="我被点击了";
                    }
                }
            })
        </script>
    </body>
    </html>

**运行结果:**  
![在这里插入图片描述][20190506164708849.png]  
点击段落，显示效果如下：  
![在这里插入图片描述][20190506164818212.png]

[20190506164708849.png]: /images/20220204/5b8d302b67ad4ab597f025b5cff8e993.png
[20190506164818212.png]: /images/20220204/6c715441cee04ef880a5153fd9a2caec.png

发表评论取消回复

表情：

评论列表（有 0 条评论，234人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue事件

声明：本文主要是照着官网教学自己敲了一遍，纯属动手练习，没什么技术含量。 -------------------- 事件：事件监听(事件绑定)：使用v-on:监

系统管理员/ 2023年06月29日 10:53/ 0 赞/ 3 阅读

相关 Vue--事件总线

原文网址：[Vue--事件总线\_IT利刃出鞘的博客-CSDN博客][Vue--_IT_-CSDN] 其他网址 [Vue事件总线（EventBus）使用详细介绍 - 知

电玩女神/ 2022年12月28日 06:20/ 0 赞/ 205 阅读

相关 vue鼠标移入移除带动画事件实例

vue鼠标移入移除事件实例文章目录 vue鼠标移入移除事件实例效果图: 一. 技术分析二.实例的实现分析

爱被打了一巴掌/ 2022年11月29日 11:55/ 0 赞/ 402 阅读

相关 vue事件处理器

vue事件处理器事件处理的时候，v-on,监听DOM事件，在运行的时候运行js的代码。事件监听：v-on <body> <div id="

梦里梦外;/ 2022年11月21日 09:53/ 0 赞/ 179 阅读

相关【Vue】—事件处理

【Vue】—事件处理 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9

àì夳堔傛蜴生んèń/ 2022年09月03日 10:28/ 0 赞/ 159 阅读

相关 vue.js 过滤器、ajax数据、事件监听实例

在vue.js开发时，数据可以使用jquery和vue-resource来获取数据。在获取数据时，一定需要给一个数据初始值。 app.html <!docty

亦凉/ 2022年06月17日 14:44/ 0 赞/ 142 阅读

相关 vue事件实例

一、功能 1、界面显示一个段落，文字是”我是一个段落“； 2、点击该段落，文字变为”我被点击了“ 二、实现 <!DOCTYPE html> <

我不是女神ヾ/ 2022年02月04日 01:35/ 0 赞/ 235 阅读

相关 vue事件

<!DOCTYPE html> <html> <head> <meta charset="UTF-8">

秒速五厘米/ 2021年12月20日 01:15/ 0 赞/ 224 阅读

相关 vue事件委托

vue事件委托在vue中完成事件委托是非常方便的例如下面想要点击li标签输入每个li标签的数值 <ul> <li>1</li>

川长思鸟来/ 2021年12月11日 02:57/ 0 赞/ 449 阅读

相关 Vue-事件处理器

v-on指令计数器演示 <!DOCTYPE html> <html> <head> <meta charset="utf-8">

谁借莪１个温暖的怀抱￠/ 2021年09月09日 08:28/ 0 赞/ 318 阅读