<!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那么就會(huì)賦值active類 -->
? ? ? ? ? ? <!--
? ? ? ? ? ? ? ? <li :class="{ key: value}"></li>
? ? ? ? ? ? ? ? key - li標(biāo)簽?zāi)硞€(gè) class 類名扭吁，
? ? ? ? ? ? ? ? value - 是來控制這個(gè) li標(biāo)簽需不需要這個(gè)類名撞蜂。
? ? ? ? ? ? ? ? value 是真就需要， value 是假就不需要
? ? ? ? ? ? -->
? ? ? ? ? ? <li :class=" {'active': curTab ==='home'}"
? ? ? ? ? ? ? ? @click='curTab="home"'
? ? ? ? ? ? ? ? >首頁</li>
? ? ? ? ? ? <li :class=" {'active': curTab ==='list'}"
? ? ? ? ? ? ? ? @click='curTab="list"'
? ? ? ? ? ? ? ? >列表</li>
? ? ? ? ? ? <br>
? ? ? ? ? ? <br>
? ? ? ? ? ? <br>
? ? ? ? ? ? <br>
? ? ? ? ? ? <!-- 數(shù)據(jù)太多了可以用循環(huán) -->
? ? ? ? ? ? <!--
? ? ? ? ? ? ? ? 調(diào)用data里的數(shù)據(jù) 把它循環(huán)遍歷渲染到頁面上
? ? ? ? ? ? ? ? key值就是他的id
? ? ? ? ? ? ? ? active就是他當(dāng)前點(diǎn)擊的時(shí)候的id的值
? ? ? ? ? ? ? ? 當(dāng)點(diǎn)擊的時(shí)候他的把id的值
? ? ? ? ? ? -->
? ? ? ? ? ? <li v-for=" (item,index) in tabs"
? ? ? ? ? ? ? ? :key="item.id"
? ? ? ? ? ? ? ? :class="{ 'active': curTab===item.id }"
? ? ? ? ? ? ? ? @click="curTab=item.id"
? ? ? ? ? ? ? ? >
? ? ? ? ? ? ? ? {{ item.name }}
? ? ? ? ? ? </li>
? ? ? ? ? ? <!-- class還可以綁定數(shù)組
? ? ? ? ? ? ? ? 顯示出來就是box1? box2
? ? ? ? ? ? -->
? ? ? ? ? ? <p :class="[active1,active2]">我是一個(gè)P標(biāo)簽</p>
? ? ? ? ? ? <!-- =========================================== -->
? ? ? ? ? ? <!-- style的綁定 -->
? ? ? ? ? ? <p :style="style1">我是一個(gè)style綁定的p標(biāo)簽</p>
? ? ? ? ? ? <p :style="{'color': courColor }">我是一個(gè)對象寫法綁定的p標(biāo)簽</p>
? ? ? ? ? ? <p :style="[style1,style2]">我是一個(gè)數(shù)組寫法綁定的p標(biāo)簽</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',
? ? ? ? ? ? // 數(shù)據(jù)變量
? ? ? ? ? ? curTab: 'home', //home ||list
? ? ? ? ? ? //數(shù)量太多了可以寫一個(gè)數(shù)組
? ? ? ? ? ? tabs: [{
? ? ? ? ? ? ? ? ? ? 'id': 'home',
? ? ? ? ? ? ? ? ? ? name: '首頁'
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? 'id': 'list',
? ? ? ? ? ? ? ? ? ? name: '列表頁'
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? 'id': 'about',
? ? ? ? ? ? ? ? ? ? name: '關(guān)于'
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ],
? ? ? ? ? ? style1:{
? ? ? ? ? ? ? ? // 添加樣式
? ? ? ? ? ? ? ? 'color':'red',
? ? ? ? ? ? ? ? "fontSize":'40px'
? ? ? ? ? ? },
? ? ? ? ? ? courColor:'green'
? ? ? ? }
? ? })
</script>
