Vuejs 元素值变化事件?

2024-01-31

我有一个元素想要观察这样的变化:

<span id="slider-value-upper" class="lower">50</span>

用 vuejs 可以干净地做到这一点吗?我尝试查看文档,但找不到类似的内容。

我想在 VueJs 中每当“50”更改为其他内容时启动一个自定义事件。


你有没有尝试过watch http://vuejs.org/api/#watch? 在你的情况下,它会是这样的。

template

<div id="app">
    {{ message }}
    <span id="slider-value-upper" class="lower">{{myValue}}</span><br />
    <input v-model="myValue">
</div>

js code

new Vue({
    el: '#app',
    data: {
        message: 'Watch example',
        myValue: 50
    },
    watch: {
        'myValue': function(val, oldVal){
        if (val < 50) {
            this.message= 'value too low!';
        }else{
          this.message= 'value is ok';
        }
      }
    }
})

查看这个例子 https://jsfiddle.net/k7gypb21/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Vuejs 元素值变化事件? 的相关文章

  • React中ComponentDidMount生命周期方法被调用两次

    在我的 React 应用程序中 加载应用程序时会进行两次初始 API 调用 我查看了 Chrome gt inpsect 中的网络选项卡 启动器 调用堆栈显示第一个调用是从VM123000 bundle js而第二个调用只是从实际的bund
  • 在 Node.js 中一次迭代 50 个项目的数组

    我是 node js 的新手 目前正在尝试编写数组迭代代码 我有一个包含 1 000 个项目的数组 由于服务器负载问题 我想一次迭代 50 个项目的块 我目前使用 forEach 循环 如下所示 我希望将其转换为上述块迭代 result i
  • Javascript拆分正则表达式问题

    你好 我正在尝试我认为在 Javascript 中相当简单的正则表达式 但给我带来了很多麻烦 我希望能够通过 javascript 通过 和 分割日期 var date 02 25 2010 var myregexp2 new RegExp
  • 使用 Google Apps 脚本处理数组中输入元素中的多个文件

    我有一个表单 允许从下拉列表中选择一个项目并上传文件 项目的名称和 ID 保存在电子表格文档中 适用于一个文件 但我想上传多个文件 你能帮我修改一下脚本吗 HTML 部分如下所示 div class col md 4 col sm 6 di
  • nuxt如何访问javascript文件中的env

    我无法在 nuxt 2 15 之外访问我的环境变量 当我部署时我可以看到 nuxt context config在浏览器中有正确的变量 但在自定义js文件中我无法访问process env baseURL它返回未定义 nuxt config
  • 在 Nodejs/javascript 中的 Excel 中创建动态数量的列或标题

    我用过exceljsNodejs中用于将json数据导出到excel的模块 它工作正常 但必须在添加行之前预定义标题 列的名称 即列是固定的 添加行后 我无法动态添加列 我尝试了许多通过 npm 提供的模块 但它们都具有相同的功能 那么 有
  • 克隆元素对应表单中所有元素的事件

    我成功克隆了表行 其中包含从数据库检索的值 不过我对它没有什么问题 我对所有元素使用了类 因为克隆会重复 ID 不会出现问题 因为它无法唯一地定位每个元素 使每个元素 行在这里唯一的方法是什么 功能如何工作 当第一次选择框时 所选 ID 的
  • 外部 CSS 是否应用于 jsPDF 生成的 pdf

    我已经开始使用 jspdf 制作一些演示 我有一个 html 文件 我的 css 在外部文件中 我写了下面的代码来生成我的pdf pdfButton on click function var pdf new jsPDF p in lett
  • nuxt中根据url参数动态加载组件

    我在 nuxt 中有一个页面 分为两部分 第一部分是一个普通的模板结构 填充了基于 url 参数的动态内容 第二部分是应根据此数据加载的组件 我正在尝试这样完成它
  • 用于匹配重复子字符串的单个js正则表达式?

    假设我有一个字符串 例如 where is mummy where is daddy 我想用空字符串替换任何一组重复子字符串 所以在这种情况下where and is元素将被删除 结果字符串将是 mummy daddy 我想知道是否有任何单
  • React 功能组件:作为函数调用与作为组件调用

    假设我有一个功能组件 const Foo props gt div props name div 直接作为函数调用有什么区别 const fooParent gt div Foo name foo div 与将其称为组件相比 const f
  • 名称属性的 CSS 选择器?

    这可能是一个愚蠢的问题 但是属性的 CSS 选择器是什么 a 那是 名字 document body innerHTML myString anchor HTML String 这段 JavaScript 创建了一个 a 带有名称的元素 H
  • 检查某个元素是否在没有 jQuery 的情况下“聚焦”

    我几乎确信我能在这里找到答案 但我没有成功 您如何检查事件调用时是否选择 聚焦 某个对象 我试过if document activeElement object HTMLBodyElement 但显然 activeElementonLoad
  • 验证动态添加的输入字段

    我用过this http docs jquery com Plugins Validation以下表单的 jquery 验证插件
  • Angular2,测试和解析数据:如何测试 ngOnInit?

    我正在通过Angular2 测试指南 https angular io docs ts latest guide testing html并希望编写一个测试ngOnInit 功能 那个来自编程指南的路由部分 https angular io
  • 处理照片上传的最佳方式是什么?

    我正在为一个家庭成员的婚礼制作一个网站 他们要求的一个功能是一个照片部分 所有客人都可以在婚礼结束后前往并上传他们的照片 我说这是一个很棒的想法 然后我就去实现它 那么只有一个问题 物流 上传速度很慢 现代相机拍摄的照片很大 2 5 兆 我
  • 如何使用 Ajax 在 Flask 中发布按钮值而不刷新页面?

    我有一个问题 当我单击 Flask 应用程序中的按钮时 我想避免重新加载 我知道有 Ajax 解决方案 但我想知道如何将我的按钮链接到 ajax 函数以发布按钮值并运行链接到其值的 python 函数 这是我的 html 按钮 div di
  • D3.js - 更改鼠标悬停时元素的不透明度 IF 条件 = false

    我正在制作一个带有过滤器的交互式 D3 js 图表 当用户单击选定的复选框时 该过滤器会显示点 此外 在鼠标悬停事件上 所选点旁边将出现一个弹出窗口 其中包含一些信息 由于图表上的点数量相对较多 因此我选择在取消选中相应复选框时使相关点变得
  • 如何运行 Mike Bostock 的 D3 示例?

    我一直在尝试经营迈克博斯托克透视地球仪 http bl ocks org mbostock 6747043例如 但是如果您尝试在本地重现它 则对其 json 文件的引用是不正确的 问题来自于这行代码 d3 json mbostock raw
  • JavaScript 开关(真)

    你好 我正在尝试处理 ajax json 响应 这是我的代码 success function j switch true case j choice1 alert choice2 break case j choice2 alert ch

随机推荐

  • Android 此功能需要 ASM7

    可能重复 https stackoverflow com questions 68709559 nestmember requires asm7 noredirect 1 我已将 Android Studio 更新为 Android Stu
  • 使用 automake 安装包含大量文件的数据目录树

    我有一个数据目录 我希望 automake 为其生成安装和卸载目标 本质上 我只想将此目录逐字复制到 DATA 目录 通常 我可能会单独列出所有文件 例如 dist whatever DATA dir subdir filea 但是当我的目
  • 如何在 spring Restapi 的 json 请求中的未知字段上抛出错误

    我有一个 spring Rest api 它获取 json 数据并绑定到 pojo GetData 每当我收到未知字段时 它都不会失败或抛出任何异常 我的要求是当它接收到 json 数据中的未知字段时应该抛出错误 public Respon
  • 如何实现 ILogger 将消息发送到 SignalR Hub?

    我想构建一个显示最新日志消息的 LogView 所以我构建了一个非常简单的设置 但在依赖注入方面失败了 这是我的实施尝试 我跳过了非关键部分 public class SignalRLogger ILogger private readon
  • 使用 Java 删除 JIRA 中的问题

    我正在尝试编写一种方法来删除 JIRA 中的问题 我已经有了创建和更新问题的方法 但我找不到任何有关如何使用 Java 删除问题的文档 如何从 Java 应用程序中删除 JIRA 问题 您可以尝试从 IssueService 中删除 htt
  • 如何限制谁可以 iframe 嵌入我的网络应用程序?

    限制 Web 应用程序可以嵌入 iframe 的网站的最佳 最安全 方法是什么 例如 所有不在名单上的人都应该被拒绝 www myFriend com www anotherfriend com www myThirdFriend com
  • 我应该使用什么类型来表示 C 枚举的二进制?

    据我所知 C 枚举是无符号整数 但这可能因实现而异 我应该为二进制表示形式的枚举使用什么类型 附注 二进制表示 是指字节数组 我想将枚举值序列化到套接字以与其他程序进行互操作 由编译器决定是否使用int代表一个enum类型 或一个long
  • Quartz.NET 服务器文档

    下载 Quartz NET 时 它包含一个带有控制台应用程序的服务器组件 网站 常见问题解答和 API 文档没有提及任何相关内容 有人知道更多关于它的信息或者知道我在哪里可以找到更多关于它的文档吗 谢谢 帕特里克 那么你可以加入Quartz
  • 在哪里可以找到使用 C# /// xml 文档注释的好示例? [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我正在寻找 NET XML 样式源代码注释和所有可用的各种标签的一些很好的示例 我在哪里可以找到一些好的
  • 如何使用 Windows + WSL2 在 Pycharm 中配置 Poetry 环境?

    TL DR 无法使用 WSL 中的现有 Poetry 环境在 PyCharm Windows 上配置 Python 解释器 当尝试设置 Poetry 环境路径时Add Python Interpreter gt Poetry Environ
  • GAE:使用 testbed 和 webtest 测试 blob 的下载

    我将 blobstore 与我的 Google App Engine 应用程序一起使用 并且在生产服务器和开发服务器上一切正常 使用测试台进行测试和webtest http webtest pythonpaste org 但是 不起作用 在
  • 检查 Discord 机器人是否在线

    我试图做到这一点 以便我的机器人一次只能连接到 Discord 而另一个仅在另一个未连接时才连接 我怎样才能做到这一点 我在用着不和谐 py https pypi org project discord py 另外 如果可能的话 我希望它能
  • 创建和使用带有代理对的字符串

    我必须使用上面的代码点0FFFF 特别是数学脚本字符 并且尚未找到有关如何执行此操作的简单教程 我希望能够 a 创建Strings 具有高代码点 并且 b 迭代其中的字符 自从char不能保留这些点我的代码如下所示 Test public
  • Colorbox 中的 CKEditor 加载不起作用 [ Google Chrome ]

    我在我的项目中使用 Colorbox 我已将 CKEditor 集成到 colorbox 中 它在所有浏览器中工作正常 但在 Google Chrome 中存在一个小问题 编辑器将在第一次单击时正确打开 关闭弹出窗口并在不加载页面的情况下第
  • 从插入触发器后调用存储过程

    也许是一个愚蠢的问题 如果我从插入后触发器 T SQL 调用存储过程 那么如何获取 刚刚插入 数据的值 例如 CREATE TRIGGER dbo MyTrigger ON dbo MyTable AFTER INSERT AS BEGIN
  • 将 NSString 转换为 cString 以与 CGContextShowTextAtPoint 一起使用

    我正在使用 CGContextShowTextAtPoint 绘制一个字符串 因此我需要将我想要绘制的 NSString 转换为 c 字符串 不幸的是 诸如欧元货币符号之类的特殊符号未正确显示 CGContextSelectFont cur
  • 合并霍夫线

    我的代码卡在了某一点 首先简短说明一下我正在做的事情 作为输入 有一张地板的图像 使用 Canny 和 HoughLinesP 算法 我想将整面墙分割成许多 小 部分 正如您在这里看到的那样 同时理想的输出 这里没有精明 我想得到 两条红线
  • 刷新 Spotify 令牌 iOS SDK 时遇到问题

    我对如何使用刷新令牌服务感到困惑 在我的应用程序中有一个包含许多播放列表的部分 当用户单击播放列表时 它会运行以下代码 func checkAuth print checking auth let auth SPTAuth defaultI
  • Node JS请求模块不发送表单数据

    我正在使用 Node js 中的 请求 模块发出发布请求 如下所示 request post url http localhost 4004 api v1 notifications post form msg msg userID use
  • Vuejs 元素值变化事件?

    我有一个元素想要观察这样的变化 span class lower 50 span 用 vuejs 可以干净地做到这一点吗 我尝试查看文档 但找不到类似的内容 我想在 VueJs 中每当 50 更改为其他内容时启动一个自定义事件 你有没有尝试