请问methods方式运行结果错误怎么回事？

来源：3-4 计算属性,方法与侦听器

慕仔9394178

2020-11-04

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>计算属性，方法，侦听器</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="app">
		{{fullName}}
		{{age}}
	</div>

	<script>
		var vm = new Vue({
			el: "#app",
			data: {
				firstName: "Dell",
				lastName: "Lee",
				age: 28
			},
			// 方法
			methods: {
				fullName: function() {
					console.log("计算了一次");
					return this.firstName + " " + this.lastName;
				}
			}
		})
	</script>
</body>
</html>

windows平台谷歌浏览器
输出结果：
function boundFn (a) { var l = arguments.length; return l ? l > 1 ? fn.apply(ctx, arguments) : fn.call(ctx, a) : fn.call(ctx) } 28

写回答

1回答

满舰饰v

2020-11-04

已采纳

你这不是应该写在computed里面么？？

methods是定义的需要被执行的函数，你没有地方调用该函数

computed是计算属性，对已存在的值，进行二次计算，正确的写法应该是

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

<head>
  <meta charset="UTF-8">
  <title>计算属性，方法，侦听器</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
  <div id="app">
    {{fullName}}
    {{age}}
  </div>

  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        firstName: "Dell",
        lastName: "Lee",
        age: 28
      },
      // 方法
      computed: {
        fullName: function () {
          console.log("计算了一次");
          return this.firstName + " " + this.lastName;
        }
      },
    })
  </script>
</body>

</html>

慕仔9394178

非常感谢！这样是可以的。用methods 写的话，调用的时候应该加（），我忘了

2020-11-04

共1条回复

Vue2.5-2.6-3.0开发去哪儿网App 零基础入门到实战

课程紧跟Vue3版本迭代，企业主流版本Vue2+Vue3全掌握

10718 学习 · 8204 问题

查看课程

相似问题

axios做post请求后，如果返回的是500，则后面的.then方法块不会执行

回答 3

static/mock ->api 报错