简单的Vue计算属性

倒转字符串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js的计算属性</title>
    
    <script type="text/javascript" src="./js/vue.js"></script>
    <script type="text/javascript">

    window.onload = function(){
        //建立vue对象
        var app = new Vue({

            el:"#a",
            data:{
                message : "你好吗"
            },
            computed:{

                reverseMessage:function(){

                    return this.message.split('').reverse().join('')
                }
            }

        });
        var a = new Vue({
            el:"#q",
            data:{
                message:"你是谁"
            }
        });
    
    }
    </script>

</head>
<body>
    <div id="a">
    <!-- 颠倒字符串 -->
    {{ message }}<br/>
    {{ reverseMessage }}
    </div>
    <div id="q">
    {{message.split('').reverse('').join('')}}
    </div>



</body>
</html>

 

posted @ 2018-12-06 16:21  寒风孤影，江湖故人  阅读(229)  评论(0)    收藏  举报