vue.js的学习笔记2

Vue的computed属性

Vue中的 computed 属性称为 计算属性，计算属性可用于快速计算视图（ View ）中显示的属性。这些计算将被缓存，并且只在需要时更新，引用计算属性时不要加  () ，应当普通属性使用。

例：

computed:{
       getTime2:function () {
      return new Date();
       }
},

　效果如图：将计算值进行了缓存，直接使用，所以输出值不变。

 

Vue的watch属性

当watch属性监听的属性值改变时，调用watch的方法，

例：

watch:{
            result:function (newValue,oldValue) {
     console.log(oldValue);
            }
       }

　　其中，newValue,oldValue分别是改变前的值和改变后的值。

Vue改变样式

先将某些样式与class绑定。

1.当temp=true时，将使用名叫yellow的class，否则不使用yellow作为class。

<div v-bind:class="{yellow:temp}"  class="mydiv"></div>

　2.将是否使用某class的信息保存在computed中，然后在标签中与其绑定。

 <div :class="myClassSytle" class="mydiv"></div>
 computed:{
            myClassSytle:function () {
       return{
           yellow:this.temp,
           mywidth:this.temp,
       };
            }
     }

　3.　也可将样式信息保存到data中，然后在标签中与其绑定。

<div :class="mycolor" class="mydiv"></div>
data:{
            temp:false,
         mycolor:'blue'
     },　

也可绑定多个class，以数组形式绑定。

<div :class="[mycolor,mv]"  class="mydiv"></div>

　这为标签绑定了mycolor，mv两种class，对应两个样式。

 4.也可以跳过样式与class的绑定，直接设置标签的样式：

<div :style="[{backgroundColor:mycolor}，{height:myheight+'px'}]"  class="mydiv"></div>
 data:{
            temp:false,
         mycolor:'blue',
         mv:'mywidth',
         mycolor:'green',
         myheight:600,
     },

　使用:style可以直接设置标签的背景颜色为mycolor的值，高度为myheight。

也可以直接设置和computed混合使用，如：

computed:{myStyle:function () {
       return{
           backgroundColor:this.mycolor,

       };
         }
     }
<div :style="[myStyle,{height:myheight+'px'}]"  class="mydiv"></div>

　Vue的v-if

这个的使用和其他语言的if语句差不多，就不赘述了。

例：

<div v-if="temp">120</div>
    <div v-else-if="temp1">2984</div>
    <div v-else="temp">22222</div>

data:{
 temp:false,
    temp1:false,
},

 值得一提的是v-showv-show，如果条件为false，运行后，还是生成了条件为false所在的标签，但是只是让其display属性为none，即该标签不进行显示。

　Vue中的循环语句

vue中的循环语句和其他编程语言不同，但是和matlab比较类似

模板为：

{{each list as value index}}

<li v-for="(a,i) in args" :key="i">  {{i}}-----{{a}}</li>

data:{
 args:[1,2,3,4,5,6,],
},

　　其中 a为迭代的每位的值，i是迭代的下标。

也可以这样使用：

<li v-for="student  in students">
        <span v-for="(v,k,i)  in student">{{v}}--{{k}}--{{i}}</span>
    </li>

students: [
    {
        name: 'xiaoming',
        age: 17,
    },
    {
        name: 'xiaoming',
        age: 17,
    },
],

 结果如下：