angular 一
发布时间:2020-12-17 09:58:28 所属栏目:安全 来源:网络整理
导读:import {Component} from 'angular2/core';interface Hero { id: number; name: string;}@Component({ selector: 'appTest',/*template: ` h1Hello,{{name}}!/h1 Say hello to: input [value]="name" (input)="name = $event.target.value" `*/ /* template:
import {Component} from 'angular2/core'; interface Hero { id: number; name: string; } @Component({ selector: 'appTest',/*template: ` <h1>Hello,{{name}}!</h1> Say hello to: <input [value]="name" (input)="name = $event.target.value"> `*/ /* template: '<h1>{{title}}</h1><h2>{{hero}} details!</h2>'*/ /*template: '<h2>{{hero.name}}</h2><div><label>id: </label>{{hero.id}}</div><div><label>name: </label>{{hero.name}}</div>'*/ /*template: `<div><h2>{{hero.name}}</h2><div><input [(ngModel)]="hero.name"></div></div>`*/ template: ` <h2>英雄列表</h2> <ul class="heroes"><li *ngFor="#hero of heroes"><span class="badge">{{hero.id}}</span>{{hero.name}}</li></ul>`,styles: [` .heroes {list-style-type: none; margin-left: 1em; padding: 0; width: 10em;} .heroes li { cursor: pointer; position: relative; left: 0; transition: all 0.2s ease; } .heroes li:hover {color: #369; background-color: #EEE; left: .2em;} .heroes .badge { font-size: small; color: white; padding: 0.1em 0.7em; background-color: #369; line-height: 1em; position: relative; left: -1px; top: -1px; } .selected { background-color: #EEE; color: #369; } `] }) export class App { public name:string = 'World'; public title = 'Tour of Heroes'; public hero = '乔布斯'; public hero:Hero = { id: 1,name: '廖建国' }; public heroes = HEROES; } var HEROES:Hero[] = [ {"id": 11,"name": "苹果手机"},{"id": 12,"name": "亚马逊"},{"id": 13,"name": "谷歌"},{"id": 14,"name": "Facebook"},{"id": 15,"name": "雅虎"},{"id": 16,"name": "阿里巴巴"},{"id": 17,"name": "淘宝网"},{"id": 18,"name": "京东"},{"id": 19,"name": "小米"},{"id": 20,"name": "腾讯"} ]; (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |