VUE学习第6天（v-bind/计算属性/事件监听）

v-bind绑定还有什么用呢：

通过v-bind：class='{active1:true,active2:false}'，这样class后面绑定是一个对象或者是数组，对象中为true的键值将被绑定。也就是等于v-bind：class='active1'这种形式。

例如：

<div id="app">
        <h2 v-bind:class='{active:isActive}'>{{message}}</h2>
        <button v-on:click="btnClick">按钮</button>
</div>

我们通过button的btnClick函数来控制isActive的true和false，从而使得h2中的内容颜色因为点击事件发生变化。这里class后面可以绑定多个值，当isActive为true的时候active才被激活，这里的active是事先设置好的红色样式。这里要注意的是，如果data中你没有声明active的存在，则会报错：Property or method "active" is not defined on the instance but referenced。

v-bind后面的内容如果太长了，可以在methods中设置一个函数return回去。例如：v-bind：class='getClass()'，然后在getClass中把你需要的内容return回去。return ｛active:this.active,line:this.line｝等等。

用这个制作一个电影列表，点击哪个电影哪个就变成红色，代码如下;

1.定义红色

    <style>
        .active{
            color:red;
        }
    </style>

2.data中保存：isActive是否激活成红色、movies电影集合、currentIndex点击的电影序号

    　　　　　data:{ 
                isActive:false,
                movies:['海王','海贼王','进击的巨人','死神'],
                currentIndex:-1
            }, 

3.methods保存btnClick函数，功能：点击的时候通过isActive变成true进行激活，点击的时候把点击的index传递给currentIndex

            methods:{
                btnClick:function(e){
                    this.isActive = "true",
                    this.currentIndex = e,
                }
            }

4.li标签写完:

        <ul>
            <li v-for="(m,i) in movies" v-on:click="btnClick(i)" v-bind:class='{active:currentIndex===i?true:false}'>{{m}}</li>
        </ul>    

　　这里当点击的时候btnClick函数传递被点击的序号，然后class如果为active的时候就显示了active的红色，当当前index和点击的index相同的时候才会变成true。简写：

<li v-for="(m,i) in movies" @click="btnClick(i)" :class='{active:currentIndex===i}'>{{m}}</li>

　　

　计算属性computed：用来计算属性并输出，名称尽量起名词形式：

　设置data中有很多书和他们的价格：

            data:{
               books:[
                   {id:100,name:'编程艺术',price:120},
                   {id:101,name:'计算机网络',price:220},
                   {id:102,name:'unix编程',price:170},
                   {id:103,name:'C语言',price:360}
               ]
            }, 

　我们通过一个computed来设置一个totalPrice，代表所有的价格：

            computed:{
                totalPrice:function(){
                    let result = 0
                    for (let i=0;i<this.books.length;i++)
                    {
                        result+=this.books[i].price
                    }
                    return result
                }
            }

　这时候我们就可以通过简单的办法来显示价格了：

        <h2>总价格{{totalPrice}}</h2>

　在computed中的属性方法中是包含一个get和一个set方法的，一般不使用set方法，使用get方法来获得属性值。computed比methods效果更好，因为它具有缓存只计算一次，methods要计算多次。尤其是里面有for循环，computed只计算一次节省了很多性能。

 　　const限定的变量不能修改，使用的时候必须赋值。如果const修饰一个对象，内部的属性还是可以修改的，但是不可以指向一个新的对象。

　　一些增强写法：

　　原先存在变量名1，变量名2，变量名3，想把他们放在对象中当作属性：

　　const obj=｛变量名1，变量名2，变量名3｝

　　函数写法：

　　对象中直接 函数名(){} 来定义函数。

　　on-click：

　　在on-click绑定的函数参数如果不加引号，则默认当作变量来传递，如：

<button @click='testFuc(123,bbb)'>测试</button>

　　123不可能为变量所以会当成值来传递，bbb则被当作变量来传递。

　　事件冒泡：

　　

    <div id="app" @click='divFuc'>
        <button @click='testFuc'>测试</button>
    </div>

　　这种情况当button被点击之后div中的divFuc函数也会执行一次。通过使用stop来阻止事件冒泡：

    <div id="app" @click='divFuc'>
        <button @click.stop='testFuc'>测试</button>
    </div>

　　同理，使用.prevent可以阻止提交。

　　使用@keyup监听键盘的点击事件：

<input type = 'text' @keyup='keyUp()'>

　　每次点击的时候会走一次keyUp函数。可以通过@keyup.enter这种形式只监听enter键。通过@keyup.once只监听一次。

　　v-if，通过绑定变量，控制变量的true和false来控制某个dom元素是否显示。

        <h2 v-if='isShow'>
            <div>abc</div>
            <div>abc</div>
            <div>abc</div>
            <div>abc</div>
            <div>abc</div>
        </h2>

　　这样isShow为true的时候才会显示下面div的内容。后面增加一个标签带有v-else，当v-if不显示的时候，v-else就会把内容显示出来。

        <h2 v-if='score>=90'>优秀</h2>
        <h2 v-else-if='score>=80'>良好</h2>
        <h2 v-else-if='score>=60'>及格</h2>
        <h2 v-else>不及格</h2>

　　这样通过在data中设置score的分数，会显示出不同的结果。当然实际编程中不可以这么写太笨了，在computed中直接走逻辑return回来一个值比较对。