一、绑定样式

1. class 绑定样式

(1) 绑定一个对象，对象的属性名是类选择器名称，属性值返回 true，表示添加该选择器

绑定单个样式：

    <style>
        .city li.active{
            background-color: orangered;
            color: white;
        }  
    </style>

    <ul class="city">
         <!-- index===activeIndex判断结果为true时，添加active选择器 -->
         <li :class="{active:index===activeIndex}" @click="activeIndex=index"
             v-for="(item,index) in citys" :key="index">{{item}}</li>
    </ul>

 <script>
        new Vue({
            el:'#app',
            data:{
                activeIndex:0,
                citys:['北京','南京','天津','东京'],
            }
        })
    </script>

绑定多个样式：

    <style>
        .box1{
            width: 200px;
            height: 100px;
            padding: 10px;
            margin-top: 10px;
        }
        .bgColor{
            background-color: lightblue;
        }
        .fontColor{
            color: white;
        }
        .border{
            border: 2px solid red;
        }
    </style>

    <button @click="bgColor=true">添加背景颜色</button>
    <button @click="fontColor=true">添加文本颜色</button>
    <button @click="border=true">添加容器边框</button>
    <!-- 绑定class,对象的属性名就是指定类的名称，属性值是true和false -->
    <div class="box1" :class="{bgColor:bgColor,fontColor:fontColor,border:border}">好好学习Vue</div>

绑定的对象的，属性名 bgColor 是 css 里的类选择器的名字，属性值 bgColor 是数据里设置的属性名。初始化设定了是false，然后点击的时候呢给它变成true，添加成功。

    <script>
        new Vue({
            el:'#app',
            data:{
                activeIndex:0,
                citys:['北京','南京','天津','东京'],
                bgColor:false,      //是否添加背景颜色
                fontColor:false,    //是否添加文本颜色
                border:false,       //是否显示边框
            }
        })
    </script>

(2) 绑定一个三元表达式

三元表达式语法结构： 条件表达式 ？ 表达式1 ： 表达式2
如果条件表达式结果为true，则返回 表达式1 ；如果为false ，则返回 表达式2 的值。
绑定单个样式：

      <ul class="city">
        <li :class="index===activeIndex?'active':''" @click="activeIndex=index"
          v-for="(item,index) in citys" :key="index">{{item}}</li>
     </ul>

绑定的三元表达式条件为true时，添加选择器；条件为false则不添加。

配合数组，绑定多个样式：

    <button @click="bgColor=true">添加背景颜色</button>
    <button @click="fontColor=true">添加文本颜色</button>
    <button @click="border=true">添加容器边框</button>
    <div class="box1" :class="[bgColor?'bgColor':'',fontColor?'fontColor':'',border?'border':'']">好好学习Vue</div>

    <script>
        new Vue({
            el:'#app',
            data:{
                activeIndex:0,
                citys:['北京','南京','天津','东京'],
                bgColor:false,      //是否添加背景颜色
                fontColor:false,    //是否添加文本颜色
                border:false,       //是否显示边框
            }
        })
    </script>

2. style 绑定样式

:style 绑定样式时，对象的属性名称是原生CSS的属性名严格名称（要使用小驼峰命名法），属性值是具体的样式值，要采用小驼峰命名规范。

        <!-- :style绑定样式时，对象的属性名称是css样式的名称（要使用小驼峰命名法），属性值是具体的样式值 -->
        <div class="box1" :style="{backgroundColor:bgc,color:fc}">好好学习Vue
            <p>背景色：<input type="text" v-model="bgc"></p>
            <p>文本色：<input type="text" v-model="fc"></p>
        </div>

<script>
        new Vue({
            el:'#app',
            data:{
                bgc:'orangered',   //定义背景颜色
                fc:'white'         //定义文本颜色
            }
        })
    </script>

二、计算属性 computed

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中的多处包含此翻转字符串时，就会更加难以处理。
所以，对于任何复杂逻辑，你都应当使用计算属性。

<div id="app">
        <p>姓：<input type="text" v-model="firstName"></p>
        <p>名：<input type="text" v-model="lastName"></p>
        <p>姓名：<input type="text" :value="firstName+ '.'+ lastName" ></p>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                firstName: '张',
                lastName: '杰',
            }
        })
    </script>

此时页面效果为：

(1) 在methods里写一个方法

通过这个方法返回this.firstName+ '.'+ this.lastName，然后再去调用这个方法。如下：

<p>姓名：<input type="text" :value="fullName()" ></p>

    <script>
        new Vue({
            el: '#app',
            data: {
                firstName: '张',
                lastName: '杰',
            },methods: {
                fullName(){
                    return this.firstName+ '.'+ this.lastName
                }
            },
        })
    </script>

(2) 计算属性 computed

结果是由两个属性拼接而来，说明 结果是由这两个属性计算而来。
在data同级，加一个computed选项，用于定义计算属性，里面定义的是方法；计算属性本质上是方法，在模板中当成属性去使用。如下：

<p>姓名：<input type="text" :value="fullName" ></p>

   <script>
        new Vue({
            el: '#app',
            data: {
                firstName: '张',
                lastName: '杰',
            },
            methods: {
            },
            //用于定义计算属性
            computed:{
                //在这里面定义的是方法
                fullName(){
                    return this.firstName+ '.'+ this.lastName
                }
            }
        })
    </script>

此时把 :value 改成 v-model，并不能实现双向绑定，且会报错。
注意： 计算属性默认情况下只能读，不能改。
如果想要让计算属性既能读，又能改，那就要换一种形式
① 在computed里定义完整结构的计算属性，然后使用v-model进行绑定计算属性。
② get方法，用于返回计算属性的值。
③ set方法，用于修改计算属性的值，记得传值。
如下：

  <p>姓名：<input type="text" v-model="fullName" ></p>

   <script>
        new Vue({
            el: '#app',
            data: {
                firstName: '张',
                lastName: '杰',
            },
            methods: {
            },
            //用于定义计算属性
            computed:{
                // 定义完整结构的计算属性
                fullName:{
                    //get方法，用于返回计算属性的值
                    get(){
                        return this.firstName+ '.'+ this.lastName
                    },
                    //set方法，用于修改计算属性的值，记得传值
                    set(val){
                        let arr = val.split('.')
                        this.firstName = arr[0]
                        this.lastName = arr[1]
                    }
                }
            }
        })
    </script>

计算属性的优势是：有缓存。当页面数据发生变化时，所有的方法都要重新执行。当计算属性用到的数据发生变化时，计算属性才会执行。