Vue 入门例子

最新推荐文章于 2024-08-14 15:45:18 发布

阿豪boy

最新推荐文章于 2024-08-14 15:45:18 发布

阅读量35

点赞数

文章标签： vue js javascript css html

本文链接：https://blog.csdn.net/qq_35516360/article/details/122067178

版权

原文链接: Vue 入门例子

上一篇: vue 对象改变时,同步更新视图的办法

下一篇: Vue 入门

绑定class

根据条件展示不同的样式

会使当前点击的对象改变颜色

event.target返回触发事件的元素
event.currentTarget返回绑定事件的元素

条件显示 v-show

重置后会根据原始数据改变样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/uikit.min.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <title>迷宫寻路</title>
    <script src="js/jquery-3.2.1.js"></script>
    <script src="js/popper.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/uikit.min.js"></script>
    <script src="js/maze.js"></script>
</head>
<body>
<div id='myDiv' class="container">
    <div>
        <h4>样式绑定</h4>
        <button v-for="(i,index) in items"
                style="margin-top: 100px;width: 60px;height: 60px"
                :posx='index'
                @click="btn_click($event)"
                v-bind:class="{'btn':true, 'btn-primary':(index === currentPage)}">
            {{index}}
        </button>
    </div>

    <div>
        <h4>条件显示</h4>
        <button v-for="(i,index) in states"
                class="btn"
                style="margin-top: 100px;width: 60px;height: 60px"
                :posx='index'
                v-show="i==true"
                @click="btn_click2($event)">
            {{index}}
        </button>
    </div>
    <button @click='reset' class="btn">重置</button>
</div>
<script>
    var myDiv = new Vue({
        el: "#myDiv",
        data: {
            currentPage: 0,
            items: new Array(10),
            states: [true, true, true, true, true, true, true, true, true, true]
        },
        methods: {
            btn_click: function (event) {
                var x = parseInt(event.currentTarget.getAttribute('posx'))
                console.log('click')
                console.log(event)
                this.currentPage = x
            },
            btn_click2: function (event) {
                var x = parseInt(event.currentTarget.getAttribute('posx'))
                console.log('click2')
                console.log(event)
                this.$set(this.states, x, false)
            },
            reset: function () {
                this.currentPage = 0

                //指向的对象改变了,不用另行通知
                this.states = [true, true, true, true, true, true, true, true, true, true]
            }
        }
    })

</script>
</body>
<script>


</script>
</html>