如何在clik button vue js上反转消息

时间:2019-11-22 23:01:01

标签: vue.js

我想在单击按钮后保留段落 保留段落显示在第二段中 就我而言,我必须使用模板吗? 这是我的代码

<div id="example">
        <p>Original Message: "{{ message }}"</p>
        <p id="pReserve"></p>
        <button @click="reserve">Reserve</button>
    </div>    

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
    <script>
        Vue.component('coba',{

        });
       var vm = new Vue({
        el: '#example',
        data: {
            message: 'Hai'
        },
        computed: {
            // a computed getter
            reversedMessage: function () {
            // `this` mengarah ke instance vm
            return this.message .split('').reverse().join('')
            }
        },
        methods: {
            reserve:{

            }
        },
        })

    </script>

1 个答案:

答案 0 :(得分:0)

这是解决方案。

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hai'
  },
  methods: {
    reversedMessage: function() {
      this.message = this.message.split('').reverse().join('');
    }
  },
});
<div id="example">
  <p>Original Message: "{{ message }}"</p>
  <p id="pReserve"></p>
  <button @click="reversedMessage">Reserve</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>