zoukankan      html  css  js  c++  java
  • vue03-directives 指令

    directives 指令

    v-for 循环
    v-on:click 点击事件
    v-model model绑定
    
    methods 方法
    
    const app = new Vue({
    	el : '#app',
    	data : {
    		friends: [
    			{
    				first : 'bobby',
    				last : 'banne',
    				age : 25
    			},
    			{
    				first : 'john',
    				last : 'Baby',
    				age : 25
    			}
    		]
    		
    	},
    	//自动计算
    	computed : {
    		bobbyFullName(){
    			return `${this.bobby.first} ${this.bobby.last}`;
    		},
    		johnFullName(){
    			return `${this.john.first} ${this.john.last}`;
    		},
    		bobbyAge(){
    			return this.bobby.age;
    		}
    	},
    	//查找
    	filters: {
    	    ageInOneYear(age) {
    	      return age + 1;
    	    },
    	    fullName(value) {
    	      return `${value.last}, ${value.first}`;
    	    }
    	},
    	methods : {
    		incrementAge(friend){
    			friend.age =  friend.age + 1;
    		},
    		decrementAge(friend) {
    	      friend.age = friend.age - 1;
    	    }
    	},
    	template : `<div>
    		<h2 v-for="friend in friends">
    			<h2>age: {{friend.age}}</h2>
    			<h2>Name: {{friend | fullName}}</h2>
    			<button v-on:click="incrementAge(friend)">+</button>
    			<input v-model="friend.first"/>
    			<input v-model="friend.last"/>
    			<button v-on:click="decrementAge(friend)">-</button>
    		</h2>
    	</div>`
    })
    
  • 相关阅读:
    动态库的创建与使用
    静态库创建与链接
    tail命令使用
    hosts文件
    dns文件
    整数编码
    多线程之间同步
    多线程编程基础
    进程间通信——信号量
    进程间通信——管道
  • 原文地址:https://www.cnblogs.com/caijw/p/8457870.html
Copyright © 2011-2022 走看看