第五篇 Vue中的动态切换 ( v-bind ) 2.0

        上一篇的内容讲到 动态切换 v-bind:class ( :class ) ，简单温习一下内容，v-for指令基于一个数组做列表渲染，v-model实现数据的双向绑定，v-bind实现数据的单向绑定；

        这一篇内容继之前讲的 v-bind:class 实现动态切换，而这次是讲 v-bind:style 实现动态切换，使用的对象写法与数组写法同上一篇内容同理，所以我们不过多的讲细，后结合之前的内容完成一个小案例；

v-bind:style ( :style ) - 对象

• 对象 

<div id="app">
    <div :style="styleObj">
        动态切换 - 对象写法
    </div>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el:'#app',
        data:{
            styleObj:{
                backgroundColor:'red'
            }
        }
    })
</script>

• 更改状态

无法达成效果，使用什么呢？正常程序走不通，走这个插队的通道 Vue.set() ；

 

 以上是动态切换v-bind:style动态切换对象写法；

 v-bind:style ( :style ) - 数组

•  数组

<div id="app">
    <div :style="styleArr">
        动态切换 - 数组写法
    </div>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el:'#app',
        data:{
            styleArr:[
            {
                backgroundColor:'red'
            },{
                fontSize:'30px'
            }]
        }
    })
</script>

 以上是动态切换v-bind:style动态切换数组写法；

• 更改状态

 [ push() ] backgroundColor:"yellow" 覆盖之前的红色； 

 [ splice() ] font-size:30px去掉；

以上是动态切换v-bind:style动态切换数组写法；接下来做一个简单的小案例。

拓展 2.0 

• 实现导航切换效果

要求：将导航栏中的标题存储到数组方式中，通过 v-for 的形式进行列表的渲染，通过点击获取索引的方式来对导航文字进行一个动态样式的切换，实现导航。

思路：先将导航栏的标题添加到数组中去，使用 v-for 指令做导航的一个列表渲染，通过点击事件来获取对应的索引，通过点击当前的索引是否与导航中对应排序的索引值相等来动态的切换。

样式：样式的话不在这里做过多讲解；

<style>
    .nav{
        width: 100%;
        height: 20px;
        padding: 0;
        /* margin: 0; */
        margin-left: 20%;
    }

    .active {
        background: red;
        color: white;
    }

    ul,
    li {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    li {
        width: 300px;
        float: left;
        text-align: center;
    }
</style>

1.将数组内容基于 v-for指令 渲染到页面，v-for中还需要带上索引index

<div id="app">
    <div class="header">
        <ul>
            <li v-for="(item,index) in navList">{{item}}</li>
        </ul>
    </div>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el:'#app',
        data:{
            // 导航数组
            navList:['首页','服务','关于']
        }
    })
</script>

渲染列表，实现以下一个基本的效果 

 2.在每一个 <li> 上绑定一个点击事件用来获取点击 <li> 上的索引值；

<div id="app">
    <div class="nav">
        <ul>
            <li v-for="(item,index) in navList"
                @click="handleClick(index)">
                {{item}}</li>
        </ul>
    </div>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el:'#app',
        data:{
            // 导航数组
            navList:['首页','服务','关于'],
            //点击的索引
            current: 0 // 0则是默认为在首页
        },
        methods:{
            handleClick(index){
                this.current = index
                console.log("点击的索引current:",this.current);
            }
        }
    })
</script>

 3.使用v-bind指令来动态切换样式，通过判断点击索引是否是当前位置的索引，是则显示，不是则不显示，可以用一个三元表达式来完成；

<div id="app">
    <div class="nav">
        <ul>
            <li v-for="(item,index) in navList"
                @click="handleClick(index)"
                :class="current===index?'active':''"
                >
                {{item}}</li>
        </ul>
    </div>
</div>

         以上就是这个案例的完整内容，结合了之前的一些小的知识点来完成一个小型案例。内容循序渐进，适合刚入学的朋友们来学习，后续的内容的难度也会逐渐提高，但会保持通俗易懂的方式让大家了解学习，欢迎大家交流学习!