Vue.js3组件的方法

在Vue.js中,可以很方便地将数据使用插值表达式的方式渲染到页面元素中,但是插值表达式的设计初衷是用于简单运算,不应该对差值做过多的操作。当需要对差值做进一步处理时,可以使用Vue.js中的组件方法和计算属性来完成这一操作。另外,操作元素的class列表和内联样式是数据绑定的一个常见需求。Vue.js组件包括方法、计算属性和网页样式的绑定,本文重点介绍Vue.js组件的方法。

3.1  方法选项

在Vue.js 3.x中,组件的方法可以在实例的methods选项中定义。

3.1.1  使用方法

使用方法有两种,一种是使用插值{{}},另一种是使用事件调用。

1. 使用插值方式

下面通过一个字符串翻转的示例来看一下使用插值的方法。

【例3.1】  使用插值的方法(源代码\ch03\3.1.html)。

在input中通过v-model指令双向绑定message,然后在methods选项中定义reversedMessage方法,让message的内容反转,然后使用插值语法渲染到页面中。

<div id="app">
    输入内容:<input type="text" v-model="message"><br/>
    反转内容:{{reversedMessage()}}
</div>
<!--引入Vue文件-->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
     //创建一个应用程序实例
    const vm= Vue.createApp({
        //该函数返回数据对象
        data(){
          return{  message: ''  }
        },
         //在选项对象的methods属性中定义方法
        methods: {
            reversedMessage:function () {
                return this.message.split('').reverse().join('')
             }
        }
    //在指定的DOM元素上装载应用程序实例的根组件
    }).mount('#app');
</script>

在Chrome浏览器中运行程序,然后在文本框中输入“江碧鸟逾白,山青花欲燃。”,可以看到下面会显示反转后的内容“。燃欲花青山,白逾鸟碧江”,如图3-1所示。

2. 使用事件调用

下面通过一个单击页面按钮来增加数值的示例来看一下事件调用。

【例3.2】  事件调用方法(源代码\ch03\3.2.html)。

首先在data()函数中定义num属性,然后在methods中定义add()方法,该方法每次调用num都会自增。在页面中首先使用插值渲染num的值,使用v-on指令绑定click事件,然后在事件中调用add()方法。

<div id="app">
    {{num}}
    <p><button v-on:click="add()">增加</button></p>
</div>
<!--引入Vue文件-->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
     //创建一个应用程序实例
    const vm= Vue.createApp({
        //该函数返回数据对象
        data(){
          return{
            num:1
           }
        },
         //在选项对象的methods属性中定义方法
        methods: {
            add:function(){
                this.num+=1
             }
        }
    //在指定的DOM元素上装载应用程序实例的根组件
    }).mount('#app');
</script>

在Chrome浏览器中运行程序,多次单击“增加”按钮,可以发现每次单击num值自增1,结果如图3-2所示。

3.1.2  传递参数

Vue.js传递参数分为如下两个步骤。

   在methods方法中进行声明,例如给【例3.2】中的add方法加上一个参数a,声明格式如下:

add:function(a){}

  调用方法时直接传递参数,例如这里传递参数2,在按钮button上直接写:

<button v-on:click="add(2)">增加</button>

下面修改【例3.2】的代码,每次单击“增加”按钮,让它自增2。

【例3.3】  传递参数(源代码\ch03\3.3.html)。

<div id="app">
    {{num}}
    <p><button v-on:click="add(2)">增加</button></p>
</div>
<!--引入Vue文件-->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    //创建一个应用程序实例
    const vm= Vue.createApp({
        //该函数返回数据对象
        data(){
          return{
              num:1
           }
        },
         //在选项对象的methods属性中定义方法
        methods: {
            add:function(a){
                this.num+=a
             }
        }
    //在指定的DOM元素上装载应用程序实例的根组件
    }).mount('#app');
</script>

在Chrome浏览器中运行程序,单击一次“增加”按钮,可以发现num值自增2,结果如      图3-3所示。

3.1.3  方法之间的调用

在Vue.js中,methods选项中的一个方法可以调用methods中的另一个方法,其语法格式如下:

this.$options.methods.+方法名

【例3.4】  方法之间的调用(源代码\ch03\3.4.html)。

<div id="app">
    {{content}}
    {{way2()}}
</div>
<!--引入Vue文件-->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    //创建一个应用程序实例
    const vm= Vue.createApp({
        //该函数返回数据对象
        data(){
          return{
              content:"古诗"
           }
        },
         //在选项对象的methods属性中定义方法
        methods: {
            way1:function(){
                alert("芳草碧色,萋萋遍南陌。暖絮乱红,也似知人,春愁无力。");
            },
            way2:function(){
                this.$options.methods.way1();
            }
        }
    //在指定的DOM元素上装载应用程序实例的根组件
    }).mount('#app');
</script>

在Chrome浏览器中运行程序,结果如图3-4所示。

本文节选自《Vue.js 3.x+Element Plus从入门到精通(视频教学版)》,获出版社和作者授权发布。

相关推荐

  1. vue3中覆盖组件样式方法

    2024-04-02 18:14:01       4 阅读
  2. Vue3中,父组件调用子组件方法

    2024-04-02 18:14:01       15 阅读
  3. vue3父子组件之间传值方式

    2024-04-02 18:14:01       7 阅读

最近更新

  1. leetcode705-Design HashSet

    2024-04-02 18:14:01       5 阅读
  2. Unity发布webgl之后打开streamingAssets中的html文件

    2024-04-02 18:14:01       5 阅读
  3. vue3、vue2中nextTick源码解析

    2024-04-02 18:14:01       6 阅读
  4. 高级IO——React服务器简单实现

    2024-04-02 18:14:01       5 阅读
  5. 将图片数据转换为张量(Go并发处理)

    2024-04-02 18:14:01       4 阅读
  6. go第三方库go.uber.org介绍

    2024-04-02 18:14:01       6 阅读
  7. 前后端AES对称加密 前端TS 后端Go

    2024-04-02 18:14:01       7 阅读

热门阅读

  1. 什么是App分发?那些分发平台可以选择?

    2024-04-02 18:14:01       2 阅读
  2. Vue tableList:<any>[]介绍

    2024-04-02 18:14:01       2 阅读
  3. python中的浅拷贝和深拷贝

    2024-04-02 18:14:01       5 阅读
  4. go中继承、多态的模拟实现

    2024-04-02 18:14:01       3 阅读
  5. Go build 交叉编译-实现多平台兼容

    2024-04-02 18:14:01       3 阅读
  6. 【无标题】

    2024-04-02 18:14:01       1 阅读
  7. 页面中的图片,以后可不能随便使用了!

    2024-04-02 18:14:01       2 阅读
  8. 常见的两种git工作流分支模型

    2024-04-02 18:14:01       3 阅读
  9. C语言经典面试题目(二十四)

    2024-04-02 18:14:01       3 阅读
  10. Android 使用LeakCanary检测内存泄漏,分析原因

    2024-04-02 18:14:01       4 阅读
  11. 【Python进阶(三)】——面向对象编程

    2024-04-02 18:14:01       3 阅读
  12. linux开启启动配置

    2024-04-02 18:14:01       5 阅读
  13. Qt 在编辑框中加入按钮控件

    2024-04-02 18:14:01       4 阅读