Vue实例演示：方法属性与图片轮播与计数器应用-优快云博客

vue的方法属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="root">
        <h2>{{sayhello()}}</h2>
        <p>姓名：{{name}}</p>
        <p>地址：{{city}}</p>
    </div>
    <script src="/vue.js"></script>
    <script>
        new Vue({
            el: '#root',
            data: {
                name: '张山',
                city: '北京'
            },
            methods: {
                sayhello(){
                    return `你好啊，欢迎来自${this.city}的${this.name}!!!`
                }
            },
        })
    </script>
</body>

</html>

效果图展示：

vue的计算器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <div id="root">
        <h1>当前的计数是：{{counter}}</h1>
        <!-- 简单的方法 -->
        <!-- <button @click="counter--">-</button>
        <button @click="counter++">+</button> -->
        <!-- 使用vue方法  就需要在vue方法中使用-->
        <button @click="add">-</button>
        <button @click="sub">+</button>
    </div>
 
    <script src="/vue.js"></script>
    <script>
    new Vue({
    el:'#root',
    data:{
        counter:0
    },
    // vue方法
    methods: {
        add(){
            console.log('add被执行了');
            this.counter--
        },
        sub(){
            console.log('sub被执行了');
            this.counter++
        }
    },
})
    </script>
</body>

</html>

vue的图片切换

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #app {
            width: 1000px;
            margin: 0 auto;
            font-size: 0;
        }

        img {
            width: 100%;
            height: 530px;
        }

        a {
            display: inline-block;
            font-size: 20px;
            width: 100px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            text-decoration: none;
            background-color: gray;
        }

        .left {
            float: left;
        }

        .right {
            float: right;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 单向绑定 v-bind 的简写 -->
        <img :src="imgArr[index]">
        <!-- 绑定点击事件  这里使用v-show隐藏要比使用v-if好-->
        <a href="#" class="left" @click="prev" v-show="index!=0">
            << /a>
                <!-- 绑定点击事件  使用v-show隐藏-->
                <a href="#" class="right" @click="next" v-show="index<imgArr.length -1">></a>
    </div>
    <script src="/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                imgArr: [
                    "img/03a9fe59e718364108c6e80318a0282.jpg",
                    "img/05ee2e7419eca94ba2a297b1e3c711e.jpg",
                    "img/7b4aeedee37a4f7d3c6248b1e4b9a7e.jpg",
                    "img/1648b5a6c75169fb34bf0c65bb9555b.jpg",
                    "img/9648d3977a872dad268d645cc77fa06.jpg",
                    "img/020494d8a4b2ebc3b52cfe0f356f5c5.jpg",
                    "img/eb0c816728ac493b0a9418dfe734b75.jpg",
                    "img/b0519540c6f4c706ff58506ab020074.jpg",
                    "img/b749d728c31acc057cc6cd34763bfd7.jpg"
                ],
                index: 0
            },
            methods: {
                prev: function () {
                    this.index--

                },
                next: function () {
                    this.index++
                }
            },
        })
    </script>
</body>

</html>