效果显示:
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~先生分享的文章,就请给点个关注吧!(๑′ᴗ‵๑)づ╭❤~;
❤对文章有任何问题欢迎小伙伴们下方留言