vue学习一

<div id="app">        
        <p>  {{ message.toUpperCase() }}</p>
        <p>{{ age > 18?'成年':'未成年' }}</p>
        <p>{{ friend.name }}</p>
        <a href="">{{ con }}</a>
        <div class="box">
            <img :src="url[index]" alt="img" style="max-width: 100%;height: auto;">
        </div>
        <button v-show="index > 0" v-on:click="index--">上一页</button>
        <button v-show="index < url.length - 1" v-on:click="index++">下一页</button>
    </div>
    <script>
        const app=new Vue({
            el:'#app',
            data:{
                index:0,
                url:[
                    "https://ts1.cn.mm.bing.net/th/id/R-C.b0ea268fa1be279d112489ce83ad4696?rik=qItsh%2fBiy33hlg&riu=http%3a%2f%2fwww.quazero.com%2fuploads%2fallimg%2f140303%2f1-140303215009.jpg&ehk=S6PLWamt%2bMzQV8uO9ugcU5d5M19BpXtCpNz2cRJ7q9M%3d&risl=&pid=ImgRaw&r=0",
                    "https://ts1.cn.mm.bing.net/th/id/R-C.66d7b796377883a92aad65b283ef1f84?rik=sQ%2fKoYAcr%2bOwsw&riu=http%3a%2f%2fwww.quazero.com%2fuploads%2fallimg%2f140305%2f1-140305131415.jpg&ehk=Hxl%2fQ9pbEiuuybrGWTEPJOhvrFK9C3vyCcWicooXfNE%3d&risl=&pid=ImgRaw&r=0",
                    "https://ts1.cn.mm.bing.net/th/id/R-C.9e45a633e95179a37c907fa2797999ad?rik=aMuPS4TunAh5ZA&riu=http%3a%2f%2fwww.quazero.com%2fuploads%2fallimg%2f140303%2f1-140303214Q2.jpg&ehk=P%2firfYpARc1fHht%2bWpapYR4W15p6SLABE8CBexoeon4%3d&risl=&pid=ImgRaw&r=0"
                ],
                message:"fuck?",
                con:666,
                age:16,
                friend:{
                    name:'尼格尔',
                    age:900
                }
            }
        })
    </script>