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所示。

  1. 使用事件调用

下面通过一个单击页面按钮来增加数值的示例来看一下事件调用。
【例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从入门到精通(视频教学版)》,获出版社和作者授权发布。

相关推荐
慧一居士17 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead18 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子6 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina6 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路7 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_7 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说8 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js