vue事件实例

我不是女神ヾ 2022-02-04 01:35 212阅读 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 条评论，212人围观）

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

相关阅读

相关 Vue实例方法/事件

Vue实例方法/事件 * vm.$on( event, callback ) * vm.$once( event, callback ) * vm.$of...

布满荆棘的人生/ 2024年04月17日 05:58/ 0 赞/ 36 阅读

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

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

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

相关 Vue 实例

[创建一个 Vue 实例][Vue] 每个 Vue 应用都是通过用 `Vue` 函数创建一个新的 Vue 实例开始的： var vm = new Vue({

r囧r小猫/ 2022年09月13日 04:16/ 0 赞/ 164 阅读

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

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

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

相关 Vue实例

每一个Vue应用都是通过用Vue函数创建一个新的Vue实例开始的： var app = new Vue({ el: 'app'

小咪咪/ 2022年05月22日 11:41/ 0 赞/ 193 阅读

相关 Vue实例

每一个组件都是一个Vue的实例，Vue的实例上有很多属性和方法。控制台输入： vm vm.$data vm.$el vm.$destroy()

矫情吗；*/ 2022年04月22日 05:14/ 0 赞/ 235 阅读

相关 vue事件实例

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

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

相关 vue事件

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

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

相关 Vue实例

本博客记录了小编在学习Vue过程中的体会与感悟，简单来说就是小编的学习笔记，学习地址主要为Vue的官网，官网地址为：[《Vue官方文档》][Vue]。相关学习笔

深藏阁楼爱情的钟/ 2021年09月20日 01:08/ 0 赞/ 410 阅读

相关 JavaScript 事件代理实例

事件代理：利用事件冒泡的特性，将本应该注册在子元素上的处理事件注册在父元素上，这样点击子元素时本身没有相应事件就到父元素上做出响应的反应。先看一个没有做代理的例子

淩亂°似流年/ 2021年07月24日 12:48/ 0 赞/ 312 阅读