12-v-for的应用

最新推荐文章于 2024-05-22 13:52:22 发布

longfei815

最新推荐文章于 2024-05-22 13:52:22 发布

阅读量47

点赞数

分类专栏： vue 小项目文章标签： vue.js javascript html

本文链接：https://blog.csdn.net/jolinoy/article/details/125310739

版权

vue 同时被 2 个专栏收录

43 篇文章 3 订阅

订阅专栏

小项目

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<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>12-v-for的应用</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
    <style>
        .bold{
            font-weight: bold;  /* 字体加粗 */
        }
    </style>
</head>
<body>
    <div id='app'>
        <ul>
            <!-- item 是数组里的每一个元素，在这里是对象！ -->
            <li v-for="item in news" :class="{bold:item.isStrong}">
                <a href="#">{{ item.title }}</a>
            </li>
        </ul>
    </div>
    <script>
        new Vue({
            el: '#app',
            data:{
                news:[
                    {
                        id:1,
                        title:'百度•高考加油',
                        isStrong:true //控制字体加粗
                    },
                    {
                        id:2,
                        title:'新浪•微博',
                        isStrong:true
                    },
                    {
                        id:3,
                        title:'搜狐•热点',
                        isStrong:false
                    },
                    {
                        id:4,
                        title:'腾讯',
                        isStrong:false
                    },
                    {
                        id:5,
                        title:'网易',
                        isStrong:false
                    }
                ]
            }
        })
    </script>
</body>
</html>

运行结果为：