前端 Vue框架学习实例（四）

最新推荐文章于 2024-08-19 15:50:15 发布

自足的猿

最新推荐文章于 2024-08-19 15:50:15 发布

阅读量158

点赞数

分类专栏： Vue学习文章标签： vue javascript

本文链接：https://blog.csdn.net/zhshuzi/article/details/118500936

版权

Vue学习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1.使用v-bind绑定style

<h2 :style="{css属性名：值}">{{message}}</h2>

<body>
    <div id="app">
        <!-- <h2 :style="{css属性名：值}">{{message}}</h2> -->
        <!-- <h2 :style="{fontSize:size}">{{message}}</h2> -->
        <h2 :style="{fontSize:size + 'px',color:fineColor}">{{message}}</h2>
    </div>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                message: "你好",
                size: 500,
                fineColor: 'red'
            }
        })
    </script>
</body>

2.v-bind和v-for联合使用

实现一个列表，点击相应list改变颜色

思路：

使用v-for将数据循环出列表。v-for="(items,index) in message" 。items，index有用
绑定样式。:class="{active:currentIndex === index}"，默认currentIndex: 0 ，即index=0默认选中颜色。
点击list改变颜色。@click="colorred(index)" 点击事件绑定一个函数 colorred: function(index) {
this.currentIndex = index

}

css样式

        .active {

            color: aqua;

        }

<body>
    <div id="app">
        <ul>
            <li v-for="(items,index) in message" :class="{active:currentIndex === index}" @click="colorred(index)">
                {{items}}
            </li>
        </ul>
    </div>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                message: ['海贼王', '火影忍者', '死神', '进击的巨人'],
                currentIndex: 0 //记录由谁来显示颜色
            },
            methods: {
                colorred: function(index) {
                    this.currentIndex = index
                }
            }
        })
    </script>
</body>

自足的猿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
前端 Vue框架学习实例（四）

1.使用v-bind绑定style<h2:style="{css属性名：值}">{{message}}</h2><body> <div id="app">  <!-- <h2 :style="{fontSize:size}">{{message}}</h.
复制链接

扫一扫