vue computed 使用

最新推荐文章于 2024-07-27 10:19:06 发布

aircoder

最新推荐文章于 2024-07-27 10:19:06 发布

阅读量1.1k

点赞数

分类专栏： vue学习

本文链接：https://blog.csdn.net/aircoder/article/details/88263146

版权

vue学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<html>
<head>
    <meta charset="utf-8">
    <title>vue</title>
</head>

<body>

<br><br>
    <div id="app" class="content">
      <br>
      <input type="text" v-model="v1" placeholder="your value">
      <input type="text" v-model="v2" placeholder="your value">
      <div>总金额是：{{sum}}</div>
      <input type="text" v-model="message">
      <p>Original message: "{{ message }}"</p>
      <p>Computed reversed message: "{{ reversedMessage }}"</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <script>
            new Vue({
                el:'#app',
                data(){
                    return{
                    v1:1,
                    v2:0,
                    message:'ewe'
                    }

                },
                methods:{
                },
                computed:{
                    
                    sum(){

                        return parseInt(this.v1)+parseInt(this.v2)
                    },

                    
                    reversedMessage: function () {
                        return this.message.split('').reverse().join('')
                    }
                }
            })
        
    </script>
    <style>
    
    
    
    </style>

</body>


</html>