<!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>
li {
list-style: none;
width: 100px;
height: 50px;
line-height: 50px;
border: 1px solid #000;
float: left;
}
li.active {
color: red;
border-color: red;
/* background:green; */
}
</style>
</head>
<body>
<div id="app">
<ul>
<!-- =========================================== -->
<!-- class的绑定 -->
<!-- v-bind:的简写就是“：” -->
<!-- v-on 的简写就是“@” -->
<!-- 如果active为ture那么就会赋值active类 -->
<!--
<li :class="{ key: value}"></li>
key - li标签某个 class 类名，
value - 是来控制这个 li标签需不需要这个类名。
value 是真就需要， value 是假就不需要
-->
<li :class=" {'active': curTab ==='home'}"
@click='curTab="home"'
>首页</li>
<li :class=" {'active': curTab ==='list'}"
@click='curTab="list"'
>列表</li>
<br>
<br>
<br>
<br>
<!-- 数据太多了可以用循环 -->
<!--
调用data里的数据 把它循环遍历渲染到页面上
key值就是他的id
active就是他当前点击的时候的id的值
当点击的时候他的把id的值
-->
<li v-for=" (item,index) in tabs"
:key="item.id"
:class="{ 'active': curTab===item.id }"
@click="curTab=item.id"
>
{{ item.name }}
</li>
<!-- class还可以绑定数组
显示出来就是box1 box2
-->
<p :class="[active1,active2]">我是一个P标签</p>
<!-- =========================================== -->
<!-- style的绑定 -->
<p :style="style1">我是一个style绑定的p标签</p>
<p :style="{'color': courColor }">我是一个对象写法绑定的p标签</p>
<p :style="[style1,style2]">我是一个数组写法绑定的p标签</p>
</ul>
</div>
</body>
</html>
<script src="/js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'hello Vue',
active: 'active',
active1:'box1',
active2:'box2',
// 数据变量
curTab: 'home', //home ||list
//数量太多了可以写一个数组
tabs: [{
'id': 'home',
name: '首页'
},
{
'id': 'list',
name: '列表页'
},
{
'id': 'about',
name: '关于'
}
],
style1:{
// 添加样式
'color':'red',
"fontSize":'40px'
},
courColor:'green'
}
})
</script>
网友评论