vue.js实现分页的样式控制

最新推荐文章于 2024-01-23 09:05:58 发布

ouhuizhong

最新推荐文章于 2024-01-23 09:05:58 发布

阅读量114

点赞数 1

分类专栏： vue.js

本文链接：https://blog.csdn.net/ouhuizhong/article/details/100124771

版权

vue.js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

vue.js的class实现分页的css样式控制

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>v_bind:class 的 css样式控制</title>
    <!--style和class可以进行判断,css样式的style和css其实不是属性-->
    <!--总共有两种判断方法-->
    <script src="../js/jquery-3.3.1.js"></script>
    <script src="../js/vuejs-2.5.16.js"></script>
    <style>
        .active{
            color: red;
        }
    </style>
</head>
<body>
<div id="app">
    <button v-bind:class="[id==1? activeClass:'']"  v-on:click="selectpage(1)">1</button>
    <button v-bind:class="[id==2? activeClass:'']"  v-on:click="selectpage(2)">2</button>
    <button v-bind:class="[id==3? activeClass:'']"  v-on:click="selectpage(3)">3</button>
    <button v-bind:class="[id==4? activeClass:'']"  v-on:click="selectpage(4)">4</button>
    <button v-bind:class="{'active': id==5}"  v-on:click="selectpage(5)">5</button>
</div>
</body>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            id:1,
            activeClass:'active',
        },
        methods:{
            selectpage:function (page) {
                this.id=page;
                alert(this.id);
            }
        }
    });
</script>
</html>

vue.js的style实现分页的css样式控制

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>v_bind:style 的 css样式控制</title>
    <!--style和class可以进行判断,css样式的style和css其实不是属性-->
    <script src="../js/jquery-3.3.1.js"></script>
    <script src="../js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
    <button v-bind:style="[id==1?redstyle:'']" v-on:click="selectpage(1)">1</button>
    <button v-bind:style="[id==2?redstyle:'']"  v-on:click="selectpage(2)">2</button>
    <button v-bind:style="[id==3?redstyle:'']"  v-on:click="selectpage(3)">3</button>
    <button v-bind:style="[id==4?redstyle:'']"  v-on:click="selectpage(4)">4</button>
    <button v-bind:style="[id==5?redstyle:'']"  v-on:click="selectpage(5)">5</button>
</div>
</body>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            id:1,
            redstyle:{"color":"red"}

        },
        methods:{
            selectpage:function (page) {
                this.id=page;
                alert(this.id);
            }
        }
    });
</script>
</html>

在这里插入图片描述