美文网首页
4、Vue的方法

4、Vue的方法

作者: Rebirth_914 | 来源:发表于2019-03-09 22:05 被阅读0次

1.methods方法

  • 可以通过{{方法名()}}来调用相应的方法

示例代码

示例代码.png

运行结果

运行结果.png
  • 既然是方法,就可以通过传值来满足不同的需求


    示例代码1.png
运行结果.png
  • 如果在当前对象中拿data中的属性,直接对象.name就可以了


    示例代码.png
运行结果.png

2. v-on指令调用方法

  • 采用v-on指令实现点击按钮有弹窗的功能


    示例代码.png
  • 采用v-on指令实现点击按钮隐藏或显示的功能


    示例代码.png
  • 采用v-on指令实现关注与取消关注的功能


    示例代码.png
  • 年龄加减的练习


    示例代码.png

注:

  • @click相当于v-on:click
  • v-on:click单击
  • v-on:dblclick双击

相关文章

  • vue(一):vue 知识点

    目录 1 Vue 实例 2 Vue 的生命周期方法 3 Vue 的数据绑定 4 computed 和 watch ...

  • Vue 基础

    Vue 实例 1. Vue实例 2. 实例属性 3. 实例方法/数据 4. 实例方法/事件 5. 实例方法/生命周...

  • 4、Vue的方法

    1.methods方法 可以通过{{方法名()}}来调用相应的方法 示例代码 运行结果 既然是方法,就可以通过传值...

  • Vue生命周期方法

    3.vue生命周期方法 4.export和export default都用于导出模块,Vue的单文件组件通常需要导...

  • vue-resource跨域请求的问题

    比如你用vue-resource的get方法请求 https://news-at.zhihu.com/api/4/...

  • VUE与APP本地方法进行互调

    vue调本地方法 本地调vue方法

  • vue-cli4.0 配置文件 vue.config.js

    vue-cli4没有config文件,解决方法如下 在根目录加上vue.config.js文件 另附一份升级版

  • VUE-方法methods

    1.methods为VUE提供存放方法的地方 2.方法的简单应用 3.方法传值 4.方法中引用data中的属性 5...

  • 常见面试题--js+css+vue

    1、变量提升、函数提升 2、数组的常用方法 3.优化首屏加载速度 4.Vue 首屏加载速度优化 5、Vue如何设置...

  • 问题记录

    1、vue生命周期: 2、返回页面保留原页面数据的方法 3、父子组件传值 4、用过哪些vue框架 5、用过哪些vu...

网友评论

      本文标题:4、Vue的方法

      本文链接:https://www.haomeiwen.com/subject/dsoepqtx.html