Vue列表渲染

Vue列表渲染

     v-for指令
     计算属性
     侦听属性




v-for指令

    1. v-for指令的使用

v-for指令需要使用“ item in items ”形式的特殊语法,items 是源数据数组,item 是被迭代数组的元素的别名。为了给Vue一个提示,以便它能跟踪每一行数据,从而重用和重新排序现有元素,v-for 指令需要为每一项提供一个唯一 key 属性。


    2. 样例 Demo1

Vue列表渲染_第1张图片


<html>
	<head>
		<meta charset="utf-8">
		<script src="../js/vue.min.js">script>
		
	head>
<body>
	<div id="app">
		<ul>
			
  • <a href="">{ {index}}.{ {item}}a> li> ul> div> <script type="text/javascript"> var vm=new Vue({ el:"#app", data:{ items:[ "员工部门","项目助理","员工管理" ] } }) script> body> html>

  •     3. 样例 Demo2

    Vue列表渲染_第2张图片

    
    <html>
    	<head>
    		<meta charset="utf-8">
    		<script src="../js/vue.min.js">script>
    		
    	head>
    <body>
    	<div id="app">
    		<table border="soild 1px black">
    			<thead>
    				<td>序号td>
    				<td>姓名td>
    				<td>年龄td>
    			thead>
    			<tbody>
    				
    					<td>{
        {index}}td>
    					<td>{
        {item.name}}td>
    					<td>{
        {item.age}}td>
    					
    				tr>
    			tbody>
    		table>
    	div>
    		<script>
    			var vm=new Vue({
          
    				el:"#app",
    				data:{
          
    					items:[{
          
    						id:1,name:"张三",age:18
    					},{
          
    						id:2,name:"柳柳",age:20
    					},{
          
    						id:3,name:"王五",age:19
    					}]
    				}
    			})
    		script>
    body>
    html>
    




    计算属性

        1. 计算属性

    Vue.js 提供了计算属性的方法。在计算属性里可以完成各种复杂的逻辑,包括运算,函数调用等,最终会返回结果。计算属性还可以依赖多个Vue实例的数据,只要其中任一数据发生变化,计算属性就会重新执行,视图也会更新。所有的计算属性都以函数的形式写在Vue实例内的 computed 选项中,最终返回计算后的结果。


        2. 样例 Demo

    Vue列表渲染_第3张图片

    
    <html>
    	<head>
    		<meta charset="utf-8">
    		<script src="../js/vue.min.js">script>
    		
    	head>
    <body>
    	<div id="app">
    		<p>原字符串:{
        {message}}p>
    		<p>字符串转换后:{
        {reversedMessage}}p>
    	div>
    		<script>
    			var vm=new Vue({
          
    				el:"#app",
    				data:{
          
    					message:"The hunter who tracks the deer can't see the mountain."
    				},
    				
    				computed:{
          
    					reversedMessage:function(){
          
    						return this.message.split("").reverse().join("");
    					}
    				}
    			})
    				
    			
    		script>
    body>
    html>
    




    侦听属性

        1.侦听属性

    当有一些数据需要随着其他数据的变动而变动时,就可以使用侦听属性watchwatch是一个对象,其中watch对象的属性是需要侦听的目标,一般data中的某个数据项,而watch对象的属性值是一个函数,是当被侦听的数据项发生变化时需要执行的函数。这个函数有两个形参:第一个值:当前值;第二个值:更新后的值。


        2. 样例 Demo

    Vue列表渲染_第4张图片

    
    <html>
    	<head>
    		<meta charset="utf-8">
    		<script src="../js/vue.min.js">script>
    		
    	head>
    <body>
    	<div id="app">
    		<h1>员工信息h1>
    		<p>
    			<label for="name">姓名:label>
    			<input type="text" v-model="name"/>
    			<span>{
        {nameTip}}span>
    		p>
    		<p>
    			<label for="emile">邮箱:label>
    			<input type="text" v-model="emile"/>
    			<span>{
        {emileTip}}span>
    		p>
    		<p>
    			<label for="phone">电话:label>
    			<input type="text" v-model="phone"/>
    			<span>{
        {phoneTip}}span>
    		p>
    		
    	div>
    		<script>
    			var vm=new Vue({
          
    				el:"#app",
    				data:{
          
    					name:"",
    					emile:"",
    					phone:"",
    					nameTip:"",
    					emileTip:"",
    					phoneTip:""
    				},
    				
    				watch:{
          
    					name:function(newVal){
          
    						if(newVal!=""){
          
    							this.nameTip="姓名输入正确";
    						}else{
          
    							this.nameTip="姓名不能为空"
    						}
    					},
    					emile:function(newVal){
          
    						if(newVal!=""){
          
    							this.emileTip="邮箱输入正确";
    						}else{
          
    							this.emileTip="邮箱不能为空"
    						}
    					},
    					phone:function(newVal){
          
    						if(newVal!=""){
          
    							this.phoneTip="电话输入正确";
    						}else{
          
    							this.phoneTip="电话不能为空"
    						}
    					}
    				}
    			})
    				
    			
    		script>
    body>
    html>
    

    你可能感兴趣的:(Vue,vue,javascript)