vue学习(五)基础入门-基础知识(4)

最新推荐文章于 2022-06-08 17:31:13 发布

wuyxinu

最新推荐文章于 2022-06-08 17:31:13 发布

阅读量205

点赞数

分类专栏： Web前端 Vue

本文链接：https://blog.csdn.net/wuyxinu/article/details/102840700

版权

Web前端同时被 2 个专栏收录

47 篇文章 47 订阅

订阅专栏

Vue

40 篇文章 55 订阅

订阅专栏

v-bind

v-bind 语法糖

v-bind 使用JavaScript表达式

v-bind 动态绑定class

之前，原生操作

v-bind 绑定class

v-bind 绑定数组语法

vue v-for出来的列表，点击当前，当前被点击的字体变颜色

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .active {
            color: red;
        }
    </style>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for="(m,item) in movies">
                <a @click="btnClick(item)" :key="item" :class="{active:i===item}">{{item}}--{{m}}</a></li>
        </ul>
    </div>

    <script>
        //创建Vue实例,得到 ViewModel
        var vm = new Vue({
            el: '#app',
            data: {
                movies: ['海王', '星际穿越', '大话西游', '少年派', '盗梦空间'],
                i: 0,
            },
            methods: {
                btnClick: function (index) {
                    this.i = index;
                },
            }
        });
    </script>
</body>

</html>

wuyxinu

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue学习(五)基础入门-基础知识(4)

v-bindv-bind 语法糖v-bind 使用JavaScript表达式v-bind 动态绑定class之前，原生操作v-bind 绑定classv-bind 绑定数组语法vue v-for出来的列表，点击当前，当前被点击的字体变颜色<!DOCTYPE html><html lang="...
复制链接

扫一扫

专栏目录