计算属性computed,反转字符串,为什么不用方法methods

<!DOCTYPE html>

<body>
<div id="app">
<P>原始字符串:{
    
    {
    
     message }}</p>
<p>计算后的反转字符串:</p>
</div>

<script src="https://unpkg.com/vue@next"></script>
<script>
 const app = Vue.createApp({
    
    
   data() {
    
    
     return {
    
    
       message: 'Hello, Java无难事!'
     }
   },
   computed: {
    
    
     reserved(message) {
    
    
     }
   }
 })
  
 //console.log(s)
 app.mount('#app')

  </script>
</body>
</html>

应该是要把字母批一下,再反转,再组合起来,但是也记不清到底是怎么用的了。

<!DOCTYPE html>

<body>
<div id="app">
<P>原始字符串:{
    
    {
    
     message }}</p>
<p>计算后的反转字符串:</p>
</div>

<script src="https://unpkg.com/vue@next"></script>
<script>
 const app = Vue.createApp({
    
    
   data() {
    
    
     return {
    
    
       message: 'Hello, Java无难事!'
     }
   },
   computed: {
    
    
     split()
     reserved()
     join()
     }
   }
 })
  
 //console.log(s)
 app.mount('#app')

  </script>
</body>
</html>

原来是这样

<!DOCTYPE html>

<body>
<div id="app">
<P>原始字符串:{
    
    {
    
     message }}</p>
<p>计算后的反转字符串:</p>
</div>

<script src="https://unpkg.com/vue@next"></script>
<script>
 const app = Vue.createApp({
    
    
   data() {
    
    
     return {
    
    
       message: 'Hello, Java无难事!'
     }
   },
   computed: {
    
    
     reversedMessage() {
    
    
       return this.message.split('').reverse().join('');
     }
   }
 })
  
 //console.log(s)
 app.mount('#app')

  </script>
</body>
</html>

计算属性里也新建一个函数,返回一个值
用this代替message

<!DOCTYPE html>

<body>
<div id="app">
<P>原始字符串:{
    
    {
    
     message }}</p>
<p>计算后的反转字符串:{
    
    {
    
     reversedMessage }}</p>
</div>

<script src="https://unpkg.com/vue@next"></script>
<script>
 const app = Vue.createApp({
    
    
   data() {
    
    
     return {
    
    
       message: 'Hello, Java无难事!'
     }
   },
   computed: {
    
    
     reversedMessage() {
    
    
       return this.message.split('').reverse().join('');
     }
   }
 })
  
 //console.log(s)
 app.mount('#app')

  </script>
</body>
</html>

再在后面跟split(’’).reverse().join(’’)
不停地点号

猜你喜欢

转载自blog.csdn.net/weixin_40945354/article/details/120168871