VUE框架学习第二天

1. v-bind的基本使用

            鼠标放上去看看
		
		
		

v-bind在第一天里已经学到了，今天把msg的值，用模板字符串显示。

2. v-bind的动态绑定（对象）

			我是web2208班学生
			切换
		
		
		

​ 有时候我们期望对Dom元素的节点的class进行动态绑定，选择此Dom是否有指定class属性。例如，给h2标签加上，当Dom元素有此class时候，变红，在写一个按钮绑定事件，点击变黑色，再次点击变红色。

 定义两个变量active和isActive，在Dom元素中使用:class={active:isActive}，此时绑定的class='active'，isActive为true，active显示，定义方法change()绑定在按钮上，点击按钮this.isActive = !this.isActive，控制Dom元素是否有class='active'的属性。

注意：这里methods里，如果再加一个getClasses()方法，需要在此之前加一个逗号，不然会报错。在h2中给class绑定的时候，一定要写getactive(),不能少了括号。在@监听里面括号可写可不写。

3. v-bind的动态绑定（数组）

 {{message}}
			 
 {{message}}

在这里，用数组绑定class中，有两种情况，分别是加引号和不加引号。加引号表示，此时class取名为active和line是固定的了，不加引号表示他是变量，可以改变。

 {{message}}
			 
			 {{message}}
			 
			  {{message}}
		
		
		

这里三个h2标签都可以显示出来，但是方法不一样。

4.v-for和v-bind的结合

			
				
				{{index}}--{{item}}
				
		
		
		

上面代码中，先用v-for遍历movies的索引，同时用@给每行绑定点击事件，点击之后，把index的值给currentIndex，这样当index===currentIndex为true，被点击元素有了active的class，颜色变红。

               
				{{index}}--{{item}}
			

如上图所示，ul里面的li里面，给绑定动态class的时候，里面的判断可以用三元运算符。

5.v-bind动态绑定style（对象方法）

          
		  我是中国人
		
		
		

如上面代码所示，给h2绑定动态style，用对象的方法就是在打括号里面写，注意，这里不能写font-size，会报错，得写fontSize,这里的50px可以写到return里面。如果用methods里面的方法调用，fontSize:this.fontsize，这里需要写this,因为要在data里面获取fontsize。

6.v-binid动态绑定style（数组方法）

           我是中国人
		
		
		

这里需要注意data里面的return里面的color的值需要加引号，return里面的getstyle传的是键值对，所以需要加大括号。