VUE框架学习第二天

1. v-bind的基本使用

<div id="app">
            <span :title="msg">鼠标放上去看看</span>
		</div>
		<script src="vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data() {
					return {
						/* msg:"页面加载于"+new Date().toLocaleString() */
						msg:`页面加载于${new Date().toLocaleString()}`
					}
				},
				methods: {
                 
				},
				computed:{
					
				}
			})
		</script>

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

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

<style type="text/css">
			.active {
				color: #f00;
			}
		</style>

<div id="app">
			<h2 :class="getactive()">我是web2208班学生</h2>
			<button type="button" @click="changeActive()">切换</button>
		</div>
		<script src="vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data() {
					return {
						isactive: true
					}
				},
				methods: {
					getactive() {
						return {
							active: this.isactive
						}
					},
					changeActive(){
						this.isactive = !this.isactive
					}
				},
				computed: {

				}
			})
		</script>

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

 定义两个变量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的动态绑定（数组）

 <h2 class="title" :class="['active','line']">{{message}}</h2>
			 
 <h2 class="title" :class="[active,line]">{{message}}</h2>

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

 <h2 class="title" :class="['active','line']">{{message}}</h2>
			 
			 <h2 class="title" :class="[active,line]">{{message}}</h2>
			 
			  <h2 class="title" :class="getClasses()">{{message}}</h2>
		</div>
		<script src="vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data(){
					return{
						message:"你好啊",
						active:'aaa',
						line:'bbb'
					}
				},
				methods: {
                   getClasses(){
					   return [this.active,this.line]
				   }
				},
				computed:{
					
				}
			})
		</script>

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

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

<div id="app">
			<ul>
				<!-- 对象的写法 -->
				<li v-for="(item,index) in movies" :key="index" :class="{active:index==currentIndex}" @click="changeColor(index)">{{index}}--{{item}}</li>
			</ul>	
		</div>
		<script src="vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data() {
					return {
						currentIndex: 0,
						movies: ["海王", "海贼王", "火影忍者", "复仇者联盟"]
					}
				},
				methods: {
					changeColor(a) {//a是形参
						console.log(a);
						this.currentIndex = a
					}
				},
				computed: {

				}
			})
		</script>

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

<ul>
               <!-- 三元表达式 -->
				<li v-for="(item,index) in movies" :key="index" :class="currentIndex==index?'active':''" @click="changeColor(index)">{{index}}--{{item}}</li>
			</ul>

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

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

<div id="app">
          <!-- <h2 :style="{fontSize:'50px'}">我是中国人</h2> -->
		  <h2 :style="getStyle()">我是中国人</h2>
		</div>
		<script src="vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data(){
					return {
						fontsize:'50px'
					}
				},
				methods: {
                    getStyle(){
						return {fontSize:this.fontsize}
					}
				},
				computed:{
					
				}
			})
		</script>

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

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

<div id="app">
           <h2 :style="getstyle">我是中国人</h2>
		</div>
		<script src="vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data(){
					return {
						getstyle:{fontSize:'50px',color:'#f00'}
					}
				},
				methods: {
                 
				},
				computed:{
					
				}
			})
		</script>

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