在线代码编辑器-开发工具-核心编程

<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Vue</title>
   <script src="https://www.hxstrive.com/cdn/libs/vue/2.7.16/vue.min.js"></script>
</head>
<body>

<div id="app">
       <p>index: {{ index }}</p>
       <p>Original message: "{{ message }}"</p>
       
       <p>Computed reversed message: "{{ reversedMessage1() }}"</p>
       
       <p>Computed reversed message: "{{ reversedMessage2 }}"</p>
   </div>

<script type="text/javascript">
       var app = new Vue({
           el: "#app",
           data: {
               index: 0,
               message: "Hello Vue"
           },
           methods: {
               // 通过定义方法的方式实现计算属性相同的功能
               reversedMessage1: function(){
                   console.log("reversedMessage1()");
                   // 注意，this 指向 app
                   return this.message.split('').reverse().join('');
               }
           },
           computed: {
               // 定义计算方法
               reversedMessage2: function(){
                   console.log("reversedMessage2()");
                   // 注意，this 指向 app
                   return this.message.split('').reverse().join('');
               }
           }
       });
   </script>

</body>
</html>

在线代码编辑器 HTML / CSS / JavaScript 实时预览

自动执行

代码编辑区

字符数: 0 提示: 输入完整的 HTML 代码，需包含 DOCTYPE 声明与 html 根标签

预览效果