绑定样式

我们可以将样式按照类名区分提前通过CSS定义，再通过Vue框架将样式绑定到标签上。

1.class的字符串写法

    <div id="root">
        <h2 :class="myStyle">{{title}}</h2>
   </div>
   <script>
        new Vue({
            el:'#root',
            data:{
                title:'今天天气真不错',
                myStyle:'classA'
            }
        })
    </script>

这种写法多适用于类名不确定，需要进行动态获取时。

2.class的对象写法

    <div id="root">
        <h2 :class="{classB:hasB,classC:hasC}">{{title}}</h2>
   </div>
   <script>
        new Vue({
            el:'#root',
            data:{
                title:'今天天气真不错',
                hasB:true, //用来标识classB是否应用
                hasC:true
            }
        })
    </script>

这种写法多适用于，类名已经确定，但是不确定是否要使用该样式，或者样式需要进行切换时使用。

3.class的数组写法

<div id="root">
        <h2 :class="[a,b,c]">{{title}}</h2>
   </div>
   <script>
        new Vue({
            el:'#root',
            data:{
                title:'今天天气真不错',
                a:'classA',
                b:'classB',
                c:'classC'
            }
        })
    </script>

这种写法适用于已确定类名，且同时需要应用多种样式时。

条件渲染

条件渲染指的是，在我们点击按钮或者进行某种操作时，让界面效果发生切换。

主要方法有v-if和v-show两种。

v-if

<div id="root">
        <h2>今天天气很{{isHot?'炎热':'凉爽'}}</h2>
        <button @click="isHot = !isHot">切换天气</button>
        <br><br>
        <!-- 只有天气炎热才会展示下面的div -->
        <div v-if="isHot">
            <span>建议：心静自然凉</span>
        </div>
        <!-- 只有天气凉爽才会展示下面的div -->
         <div v-else>
            <span>建议：穿秋裤了！</span>
        </div>
    </div>

    <script>
        new Vue({
            el:'#root',
            data:{
                isHot:true
            },
            
        })
    </script>

v-if可以搭配v-else一起使用，如果有多种样式需要切换，也可以再添加v-else-if。

只有当v-if的表达式返回值为true的时候该样式才会被应用。

注意：v-else必须跟在v-if后使用，单独使用不会被识别。

v-show

<div id="root">
        <h2>今天天气很{{isHot?'炎热':'凉爽'}}</h2>
        <button @click="isHot = !isHot">切换天气</button>
        <br><br>
        <!-- 只有天气炎热才会展示下面的div -->
        <div v-show="isHot">
            <span>建议：心静自然凉</span>
        </div>
        

        <!-- 只有天气凉爽才会展示下面的div -->
        <div v-show="!isHot">
            <span>建议：穿秋裤了！</span>
        </div>

    </div>
    <script>
        new Vue({
            el:'#root',
            data:{
                isHot:true
            },
            
        })
    </script>

v-show的使用方法与v-if大体一致，但是v-show是通过改变元素的display:none属性来控制元素是否显示的。

如果一定要说，那么v-if才是真正的条件渲染。v-if会让不显示的元素直接消失在DOM中，当切换为显示时则会进行重新渲染。

如果v-if的初始值是false，那么初渲染时不会渲染到此节点，只有当条件切换时才会进行渲染。而v-show则会在一开始就进行全部渲染，只是通过CSS样式决定其是否显示。 因此，使用v-if时可能会获取不到某些DOM节点。

总结来说，如果一个节点切换的频率很低，那我们应该使用v-if，如果节点需要进行高频切换，那么v-show更为适合。

列表渲染

基本列表

在Vue中，我们可以使用v-for对数组进行遍历。

<div id="root">
        <ul>
            <!-- 使用v-for遍历数组 -->
            <li v-for="p in persons" :key="p.id">
                {{p.name}}--{{p.age}}--{{p.sex}}
            </li>
</div>

    <script>
        new Vue({
            el:'#root',
            data:{
                persons:[
                    {id:'001',name:'老刘',age:20,sex:'男'},
                    {id:'002',name:'老李',age:19,sex:'男'},
                    {id:'003',name:'老王',age:18,sex:'女'},
                    {id:'004',name:'老张',age:17,sex:'女'}
                ]}
        })
    </script>
                

v-for也可以用来遍历对象和字符串，可以返回内容及索引。

列表过滤

computed: {
          fmtPersons() {
              const { persons, keyWord } = this;
              return persons.filter(p => p.name.indexOf(keyWord) !== -1)
                }
            }

watch也可以实现对列表进行过滤，但是使用watch实现会导致原数据也发生改变。我们当然也可以选择再新建一个新的数组存储，但是这样会非常繁琐。

因此，可以使用计算属性computed来完成这一功能。计算属性可以为原对象添加新的进行计算后的属性，不会改变原数据。

列表排序

data:{sortType:0, //0原顺序，1升序，2降序},
computed: {
        fmtPersons() {
            const { persons, keyWord ,sortType} = this;
              //过滤
            let arr = persons.filter(p => p.name.indexOf(keyWord) !== -1)
            //排序
            if(sortType){
                 arr.sort((a,b)=>{
                       if(sortType === 1) return a.age - b.age;
                            else return b.age - a.age;
                    })
                    }
                    return arr;
                }
            }

想对过滤后的列表内容进行排序，可以在computed中增加排序代码，使用sort函数，通过给按钮绑定sortType的值来实现选择语句，进行排序。

列表更新

methods: {
                updateMei(){
                    this.persons[0].name = '佩奇';
                    this.persons[0].age = 99;
                    this.persons[0].sex = '男';
                    
                    /*this.persons[0] = {
                        name:'佩奇',age:99,sex:'男'
                    };
                    this.persons.push();*/

                }
            }

此处应注意Vue的更新数据机制。

在Vue的封装中，作者为整个Vue框架中的每一个属性都添加了set和get函数，以及重新刷新页面命令，这样可以保证每个属性都可以被检测到，当发生数据改变时，set函数马上会被调用，数据可以进行实时更新，因此我们可以通过单独更改对象中每个属性的方式来进行数据刷新。

但是当我们改变了数组中的某一项（且为一个对象）时，整个对象都被完全替换，而我们手动更改的对象中是不含有set和get函数的，因此我们更改的数据并不被Vue识别到，页面也就不会进行实时更新。

可进行的解决方法：作者给Vue中的某些数组方法也封装了页面刷新命令，当我们对数据进行方法调用时（比如push()，我们实际并没有push元素进去，但是却可以进行一次更新。

但是注意：即使我们用了这样的解决方法，更改后的数组元素也与数组中其他元素不同，没有set和get函数了。