Vue使用V-for和v-on和v-bind制作导航切换页面

HuangJunqi~先生

已于 2022-01-21 15:16:26 修改

阅读量1.3k

点赞数 1

文章标签： vue

于 2021-12-08 11:18:12 首次发布

本文链接：https://blog.csdn.net/Huangjunqi23/article/details/121786804

版权

效果显示:

Vue使用V-for和v-on和v-bind制作导航切换页面

css代码

 <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style-type: none;
            display: inline-block;
            margin-right: 2px;
            padding: 10px;
            background-color: lawngreen;
        }
        span{
            padding: 7px;

        }

        .red {
            background: red;
        }

        .honse{
			background: red;
		 }
    
    </style>

这是<body>


    <div id="app">
        <ul>
            <li v-for="item,click in price"@click="istrue=!istrue" :class="{red: yanse == click}" v-on:click="fu(click,item)">{{item}}</li>
        </ul>
        <div>你选择了<span :class="istrue?'red':'honse'">{{name}}</span></div>
    </div>

</body>

把这个通过官方的Vue.js链接也写在<body></body>里面

 <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                price: ['HTML', 'CSS', 'JavaScript', 'Vue.js'],
                yanse: -1,
                name:"",
                istrue:""
            },
            
            methods: {
                fu: function (click,velue) {
                    this.yanse = click;
                    this.name=velue;
                }
            }
            
        })
    </script>

整体代码是：

❤如果文章对您有所帮助，就请在文章末尾的左下角把大拇指点亮吧！(#^.^#)；

❤如果喜欢HuangJunqi~先生分享的文章，就请给点个关注吧！(๑′ᴗ‵๑)づ╭❤～；

❤对文章有任何问题欢迎小伙伴们下方留言

HuangJunqi~先生

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue使用V-for和v-on和v-bind制作导航切换页面

<div id="app"> <ul> <li v-for="item,click in price"@click="istrue=!istrue" :class="{red: yanse == click}" v-on:click="fu(click,item)">{{item}}</li> </ul> <div>你选.
复制链接

扫一扫