笔记-计数器和图片切换07

最新推荐文章于 2024-05-17 14:32:46 发布

梦梦的小斑鸠

最新推荐文章于 2024-05-17 14:32:46 发布

阅读量89

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/CP011522/article/details/126906075

版权

<body>
    <div id="app">
        <p>{{sayHello()}}</p>
        <ul>
            <li>姓名: {{name}}</li>   
            <!-- 姓名: peng jia xiong -->
            <li>学校: {{school}}</li>    
            <!-- 学校: jiang ruan -->
        </ul>
    </div>
    <script src="./vue.js"></script>
    <script>
        let user = {
            name:"peng jia xiong ",
            school:"jiang ruan", 
        };
        let vm = new Vue ({
            el:'#app',
            data: user, 
            methods:{
                sayHello(){
                    return`你好,欢迎来自${this.school} 的 ${this.name} !`
                    // 你好,欢迎来自jiang ruan 的 peng jia xiong !
                }
            }
        })
    </script>
    
</body>

计数器

<body>
    <div class="ha">
    <script src="./vue.js"></script>
    <div id="app">
        <h2>当前计数：{{counter}}</h2>
        <button v-on:click="counter++">+</button>
        <button v-on:click="counter--">-</button>
    </div>
</div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                counter: 0
            }
        })
    </script>
    

    
</body>

图片切换

<body>
    <div id="app">
        <div id="" class="son">
            <button type="button" class="btnleft" @click="pref" v-show="index!=0"> < </button>
            <button type="button" class="btnright" @click="next" v-show="index<imgArr.length-1"> > </button>
            <img :src="imgArr[index]" >
        </div>
    </div>
    <script src="./vue.js" type="text/javascript"></script>
    <script type="text/javascript">
        window.onload=function(){
            var app=new Vue({
                el:"#app",
                data:{
                    imgArr:[
                    
                        "images/08.jpg",
                        "images/09.jpg",
                        "images/10.jpg"],
                       
                    index:0,
                    
                },
                methods:{
                    pref:function(){//上一张
                        this.index--;
                    },
                    next:function(){//下一张
                        this.index++;
                    }
                    
                }
            })
        }
    </script>
</body>