vue v-on 艾特@

这篇具有很好参考价值的文章主要介绍了vue v-on 艾特@。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

vue v-on

内联代码:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <div id="app">

    <button v-on:click="count++">+</button>
    <div>{{ count }}</div>

    <button @click="count--">-</button>
  </div>

  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.14/vue.js"></script>
  <script>

    const app = new Vue({
      el: '#app',
      data: {
        count: 100,
      }
    })
  </script>

</body>

</html>

运行效果
vue v-on 艾特@,web_html,javascript

methods方法

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.14/vue.js"></script>

  <div id="app">
    <button @click="fn"> 切换显示 </button>
    <p v-show='isShow'> Hello </p>

  </div>


  <script>

    const app = new Vue({
      el: '#app',

      data: {
        isShow: true,
      },
      methods: {
        fn() {
          this.isShow = !this.isShow;
        },
      }
    })
  </script>

</body>

</html>

vue v-on 艾特@,web_html,javascript

带参数

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <div id="app">
    <h3>小黑自动售货机</h3>
    <button @click="buy(5)">可乐5</button>
    <button @click="buy(10)">咖啡10</button>
    <button @click="buy(8)">牛奶8</button>
    <p>银行卡余额:{{ money }}</p>

  </div>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.14/vue.js"></script>
  <script>

    const app = new Vue({
      el: '#app',
      data: {
        money: 100,
      },
      methods: {
        buy(price) {
          this.money -= price
        },
      }
    })
  </script>

</body>

</html>

演示

vue v-on 艾特@,web_html,javascript文章来源地址https://www.toymoban.com/news/detail-686857.html

到了这里,关于vue v-on 艾特@的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3中常用的指令之v-bind和v-on

    一个vue2和vue3之间的不同之处:Vue2中template模板中只能有一个根元素,但是在Vue3中允许template中有多个元素。 1.v-bind的绑定基本属性 某些属性也希望是动态绑定的,比如动态绑定a元素中的href属性。 v-bind可以绑定一个或者多个属性值,或者向另一个组件中传递props值。 v-bind

    2024年02月16日
    浏览(42)
  • vue报错解决:Error in v-on handler (Promiseasync) “TypeError Cannot read properties ofundefined

    报错信息:[Vue warn]: Error in v-on handler (Promise/async): \\\"TypeError: Cannot read properties of undefined (reading \\\'code \\\')” axios可以获取数据,控制台输出为undefined 报错代码: 错误原因:在①或者②的axios请求时,请求结果被catch捕获,所以axios可以获取到数据,但在catch中的res此时是未赋值的,

    2024年02月07日
    浏览(49)
  • Vue.js报错问题解决:[Vue warn]: Error in v-on handler: “ReferenceError: XXX is not defined“.

    代码: 报错信息: 原因:count 忘加 this 了。。。 1、2

    2024年02月13日
    浏览(58)
  • [Vue warn]: Error in v-on handler: “TypeError: Cannot read properties of undefined (reading ‘$refs‘)

    报错: [Vue warn]: Error in v-on handler: \\\"TypeError: Cannot read properties of undefined (reading \\\'$refs\\\')\\\"   背景: 1.在做vue项目时,在功能弹框中,想实现新增内容。              2. 报错原因是要触发menuCheckall组件后,才可以提交,因为不触发menuCheckall的时候dom未加载, 没有编译渲染进dom里

    2024年01月18日
    浏览(40)
  • v-on:click,v-on:keyout高阶用法

    2024年02月13日
    浏览(34)
  • 初学Vue(全家桶)-第n天(vue2):关于v-bind=“$attrs“、v-bind=“$props“ 和v-on=“$listeners“的使用

    1、 v-bind=\\\"$props\\\" : 可以将父组件的所有props下发给它的子组件,子组件需要在其props:{} 中定义要接受的props。 2、 v-bind=\\\"$attrs\\\" : 将调用组件时的组件标签上绑定的 非props 的属性(class和style除外)向下传递。在 子组件中应当添加inheritAttrs: false (避免父作用域的不被认作props的特性绑

    2024年02月04日
    浏览(32)
  • 2、简单上手+el挂载点+v-xx(v-text、v-html、v-on、v-show、v-if、v-bind、v-for)

    vue3:https://cn.vuejs.org/ vue2:https://v2.cn.vuejs.org/v2/guide/ 流程: 导入开发版本的Vue.js 创建Vue实例对象,设置el属性和data属性。 使用简洁的模板语法把数据渲染到页面上 示例: Vue实例的作用范围是什么呢? Vue会管理el选项命中的元素及其内部的后代元素。 是否可以设置其他的

    2024年02月13日
    浏览(42)
  • [HTML]Web前端开发技术26(HTML5、CSS3、JavaScript )JavaScript基础——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 数据类型 数据类型-字符型 数据类型-数值型 数据类型-布尔型 数据类型-其它类型 变量 转义字符 运算

    2024年02月20日
    浏览(65)
  • Web前端大作业制作个人网页(html+css+javascript)

    🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。 ⭐个人网页设计网站模板采用DIV CSS布局制作,网页作品有多个页面,如 :个人介绍(文字页面)、我的作品(图片列表)、个人技能(图文页

    2024年02月10日
    浏览(53)
  • 使用 HTML、CSS 和 JavaScript 创建实时 Web 编辑器

    在本文中,我们将创建一个实时网页编辑器。这是一个 Web 应用程序,允许我们在网页上编写 HTML 、 CSS 和 JavaScript 代码并实时查看结果。这是学习 Web 开发和测试代码片段的绝佳工具。我们将使用 iframe 元素来显示结果。 iframe 元素用于在当前 HTML 文档中嵌入另一个文档。 i

    2024年02月12日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包