06v-on指令的案例

最新推荐文章于 2023-08-18 16:57:00 发布
最新推荐文章于 2023-08-18 16:57:00 发布
阅读量129 收藏
点赞数
分类专栏： 笔记 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/New_new_zero/article/details/107400005
版权 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>v-on补充</title>
  </head>

  <body>
    <div id="app">
      <!-- 点击一次 -->
      <input type="button" value="v-on指令" v-on:click="doIt1" />
      <input type="button" value="v-on指令简写成@" @click="doIt1" />
      <!-- 点击两次 -->
      <input type="button" value="dblclick指令" @dblclick="doIt1" />
      <!-- 复杂事件 -->
      <h2 @click="changeFood">{{food}}点击一下console中弹出：西蓝花炒蛋 F12</h2>

      <!-- <input type="text" @keyup.enter="sayHi" /> -->
    </div>
    <!-- 1.开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      var app = new Vue({
        el: "#app",
        //属性：
        data: {
          food: "西蓝花炒蛋",
        },
        //方法:
        methods: {
          //鼠标简单点击
          doIt1: function () {
            alert("做It1");
          },
          //复杂事件
          changeFood: function () {
            // console.log(this.food);//console中弹出：西蓝花炒蛋
            this.food += "好好吃！";
          },

          //   doIt: function (p1, p2) {
          //     console.log("做it");
          //     console.log(p1);
          //     console.log(p2);
          //   },
          //   sayHi: function () {
          //     alert("吃了没");
          //   },
        },
      });
    </script>
  </body>
</html>
充满鲜花的世界到底在哪里
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
V-on指令的使用
ADC06的博客
03-15 5200
一.V-on指令 (一) .1. v-on 的作用 用来给元素注册点击事件的 2.v-on 的语法 (1).v_on:事件名 ="事件函数" (2).v-on:click 可以简写 @click (3).v-on:mouseenter 可以简写 @mouseenter 3.v-on的注意点 (1).注册事件需要一个事件的函数 (2).创建vue实例的时候，data是用来给vue实例提供的属性（数据），不应该提供方法 （二）.案例： 代码部分如下: <div ...
探索 v-on 之奥秘一：事件及各类修饰符的深度剖析与案例展示
06-20
在 Vue 中，事件处理是实现组件交互的重要方式，而 `v-on` 指令则是事件处理的核心工具。本文将深入剖析 `v-on` 的用法，特别是事件修饰符的运用，通过案例展示其强大之处。 首先，`v-on` 用于监听并响应 DOM 事件...
vue学习——v-on实例
练涛
10-20 883
v-on 绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。 用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。 在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个 $event属性：v-on:click="handle('ok', $even...
常用指令v-on的基本用法案例
hq.zheng的博客
07-10 837
一.案例代码&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;常用指令v-on&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="app&qu
v-on:属性的self修饰符案例
qq_42418169的博客
08-10 357
将self修饰符放在button按钮的外层div上，button的click事件起作用时，外层的inner并没有执行click事件 **注意：**虽然被self修饰符加持，不会被冒泡机制影响，单不代表冒泡机制会被阻止
VUE学习之v-on指令基础自用
是千汇的博客
09-16 233
v-on基础和简单实例 Vue首先要导入官方js <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> v-on方法为事件绑定元素 有三种常用事件和两种调用方法： 单击，鼠标移入，双击 调用v-on： v-on:click:“method” 和@click:“method” <div id="v_on"> <input type="button" value="事件绑定"
Vue常用指令+用法举例 详解
m0_69287579的博客
08-18 3751
有：v-on指令、v-model指令、v-once指令、v-show指令、v-if指令、v-else指令、v-else-if指令、v-for指令、v-text指令、v-html指令、v-bind指令等等。vue中双向绑定是一个指令v-model，可以绑定一个动态值到视图，同时视图中变化能改变该值。可以单独使用，v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。v-if和v-show有同样的效果，不同在于。v-for可用来遍历数组、对象、字符串。
Vue自定义指令实现v-on及v-model
lightning_1的博客
12-02 1597
我们来模仿v-on和v-model实现简易的v-on和v-model，带你彻底理解自定义指令的使用，运行前请先引入vue2.x
element-ui后台管理系统小案例
08-14
1. **Vue.js 基础**：Vue.js 提供的数据绑定、指令系统（如 v-if、v-for、v-bind 和 v-on）以及组件化开发模式，这些都是构建整个管理系统的基石。理解这些基本概念是掌握案例的关键。 2. **Element-UI 介绍**：...
vue-todolist案例
03-08
3. **事件处理**：Vue通过`v-on`指令监听并处理用户交互，例如添加、删除或切换待办事项。这通常涉及到methods对象中的函数，如`addTask`、`deleteTask`等。 4. **状态管理**：虽然这是一个简单的案例，但Vue也支持...
Todo-list案例.zip
12-08
Vue的数据绑定使用`v-bind`（简写为`: `）和`v-on`（简写为`@`）指令。 ```html <input type="text" v-model="newTodo" placeholder="新增待办事项"> 添加 <li v-for="todo in todos" :key="todo.id">{{ ...
vue组件化编程-todoList案例.zip
07-14
- 案例中可能使用了`v-for`循环遍历待办事项列表，`v-bind`（简写`:`）绑定属性，`v-on`（简写`@`）绑定事件等指令。 3. **数据绑定**： - Vue实例中的数据通过`data`选项定义，如`todos`数组存储待办事项。 - ...
VUE:学生列表案例——内部指令v-for与v-on简单应用
fuzhijieabc的博客
12-01 4537
#本案例需要熟悉v-for与v-on这两个vue内部指令，下面通过两个简单的案例，带领大家迅速熟悉一下这两个常用的内部指令 v-for指令：主要用于列表的渲染与循环数组 简单案例： 关键代码部分： <div id="app"> <div v-for="(item,index) in list" data-id=“index"> 索引是：{{index}}，元素内容是：{{item}} </div> </div> <script>
avif-0.5.0-cp37-cp37m-manylinux2010_i686.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
[毕设]HTTP代理服务器开发与实现.zip
07-27
[毕设]HTTP代理服务器开发与实现
PyQt5-5.15.11-cp38-abi3-win32.whl
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
jupyterlab_broccoli_turtle-0.4.7-py3-none-any.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
pillow-10.4.0-cp311-cp311-win32.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
pi_heif-0.17.0-cp38-cp38-macosx_12_0_x86_64.whl
最新发布
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
v-on 案例
05-25
v-on 是 Vue.js 中用于绑定事件的指令，可以通过它将事件与组件中定义的方法进行关联。下面是一个简单的 v-on 案例： HTML： ```html <div id="app"> <button v-on:click="increment">Click me!</button> <p>{{ count }}</p> </div> ``` Vue 实例： ```javascript new Vue({ el: '#app', data: { count: 0 }, methods: { increment: function() { this.count++; } } }); ``` 在上面的例子中，我们在 `<button>` 标签上使用了 `v-on:click` 指令，将点击事件与 Vue 实例中的 `increment` 方法进行了绑定。当用户点击按钮时，就会触发 `increment` 方法，从而将 `count` 的值加一，并且这个变化会反映到页面中的 `<p>` 标签中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值