Vue的计算属性：methods方法、computed计算属性、watch监听属性

pan_junbiao

已于 2024-09-14 17:58:38 修改

阅读量1.7k

点赞数 29

分类专栏： Vue 我の原创文章标签： vue.js 前端 javascript

于 2024-08-24 19:20:15 首次发布

本文链接：https://blog.csdn.net/pan_junbiao/article/details/141500332

版权

1、methods 方法

在创建的 Vue 应用程序实例中，可以通过 methods 选项定义方法。应用程序实例本身会代理 methods 选项中的所有方法，因此可以像访问 data 数据那样来调用方法。

【实例】在 Vue 应用程序中，使用 methods 选项定义获取用户信息方法和乘法计算方法。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="pan_junbiao的博客">
    <title>Vue实例</title>
</head>

<body>
    <div id="app">
        <p>用户ID：{
  {userInfo.userId}}</p>
        <p>用户名称：{
  {userInfo.userName}}</p>
        <p>博客信息：{
  {userInfo.blogName}}</p>
        <p>博客地址：{
  {userInfo.blogUrl}}</p>
        <p>{
  {num1}} 乘以 {
  {num2}} 的结果：{
  { multiplicine(num1, num2) }}</p>
    </div>
</body>

<!-- 引入 Vue 框架 -->
<script src="../js/vue.global.js"></script>

<script type="text/javascript">
    //使用 Vue.createApp 函数创建一个应用程序实例
    const vueApp = Vue.createApp({
        //数据
        data() {
            return {
                userInfo: {}, //定义用户对象
                num1: 20,
                num2: 40
            }
        },
        //初始化的入口
        created: function () {
            //调用方法：获取用户信息
            this.getUserInfo();
        },
        //方法
        methods: {
            //获取用户信息
            getUserInfo: function () {
                this.userInfo = {
                    userId: 1,
                    userName: "pan_junbiao的博客",
                    blogName: "您好，欢迎访问 pan_junbiao的博客",
                    blogUrl: "https://blog.csdn.net/pan_junbiao"
                }
            },
            //乘法计算
            multiplicine: function (a, b) {
                return a * b;
            }
        }
        //使用 mount() 方法，装载应用程序实例的根组件
    }).mount('#app'); 
</script>

</html>

执行结果：