JavaScript表达式和条件判断

表达式

使用JavaScript表达式，判断！

<div id="app">
        <p v-bind:style="{color:color?'red':'blue'}">{{ username.split(" ").reverse().join(" ") }}</p>
  </div>
<script src="./vue.js"></script>
<script>
 new Vue({
 	el: "#app",
 	data: {
 		 username: "hello world",
	 	color: false
		}    
	})
</script>

条件判断

1）使用v-if判断模板

<div id="app">
	<template v-if="age <18">
		 <p>看书追剧</p>
		  <p>游戏游玩</p>
       </template>
       <template v-else-if="age >=18 && age<25">
  	<p>毕业工作</p>
   	 <p>谈婚论嫁</p>       
     </template>
      <template v-else>
       <p>赚钱</p>
       <p>赚钱</p>
     </template>
     </div>
<script src="./vue.js"></script>
<script>
	new Vue({
		el: "#app",
		data:{
			weather: 'summer'
			 age:18
		}
	 })
 </script>

	        

2）普通判断

<!-- div#app   div id="app" -->   
<!-- div.app   div class="app" -->    
<div id="app">        
<!-- <p v-if="weather == 'summer'">约朋友吃饭</p> -->        
<!-- <p v-else-if="weather == 'rain'">听音乐玩游戏</p> -->        
<!-- <p v-else>看书睡觉</p> -->
</div>
<script src="./vue.js"></script>
<script>
	new Vue({        
		el: "#app",       
 		data:{            
 			weather: 'summer',                  
 		}            
 	})
 	</script>

切换方式

在切换方式时，之前输入的信息删除，可以使用key属性推荐使用整型
、字符串类型。

<div id="app">
<template v-if="loginType=='username'">            
<label for="">用户名：</label>            
<input type="text" placeholder="用户名" key="username">        
</template>        
<template v-else-if="loginType=='email'">            
<label for="">邮箱：</label>            
<input type="text" placeholder="邮箱" key='email'>        
</template>        
<button v-on:click="changeLoginType">切换登录方式</button>       
 <!-- <button @click="changeLoginType">切换登录方式</button> -->

    </div>
    <script>    
    new Vue({        
    el: "#app",        
    data:{
     loginType: 'email'        
     },
      methods: {            
     		 changeLoginType:function(){                
     		 this.loginType = this.loginType=='username'?'email':'username'            
      }        
      }            
   })</script>
    

循环

循环数组：再模板中使用v-for 指令来循环数组，对象等。

<div id = "app">
 <table>            
 <tr>               
    <th>序号</th>                
    <th>标题</th>               
    <th>作者</th>            
 </tr>            
 <!-- <tr v-for="(book,index) in books">                
         <td>{{index+1}}</td>                
         <td>{{book.title}}</td>                
         <td>{{book.author}}</td> -->            <tr v-for="(index,book) in books">                
 <!-- 第一个位置 数据  第二个位置 索引 -->                
         <td>{{book+1}}</td>                
         <td>{{index.title}}</td>                
         <td>{{index.author}}</td>            
 </tr>      
 </table>
 </div>
<script>
	new Vue({
	    data:{
	         books:[
	          {
	          'title': '神墓',         
	          'author': '辰东'                },               
	          {                    
	          'title': '斗罗大陆',                    
	          'author': '唐家三少'                },               
	          {                    
	          'title': '神雕侠侣',                    
	          'author': '金庸'                },                
	          {                    
	          'title': '死神',                    
	          'author': '梦洛'                },          
	    ]        ）
</script>

循环对象：

<div v-for="(value,key) in person">           
	{{key}}: {{value}}       
</div>
person: {               
         "username":"happy",                
         "age": "19",               
          "addr": "xt"
         }

保持状态

循环出来的数据，如果没有使用key元素来唯一标识，如果后期数据发生更改，默认是会重用的，并且元素的顺序不会跟着数据的顺序更改而更改。

<div id="app">         
	<div v-for="book in books" v-bind:key="book">           
		 <label>{{book}}</label>            
		 <input type="text" v-bind:placeholder="book">        
 	</div>        
 <button @click="changeBooks">更换图书</button>    
 </div>
 <script>    
 	new Vue({       
 		 el: "#app",       
 		 data: {           
 		 	 books: ['Python','Java','PHP','C++']        
 		       },       
	        methods: {            
	        	changeBooks:function(){                
	        			this.books.sort(function (a,b){
	        			                    // 整数 true    负数 false                    
	        			                    return 5- Math.random()*10              
	      })           
	}        
	}    
})</script>