文档章节

angular2 学习二 {{model}} - 文本插值

王福林
 王福林
发布于 2016/12/01 11:28
字数 519
阅读 184
收藏 0

{{model}} - 文本插值

在模板中使用可以{{表达式}}的方式绑定组件模型中的表达式,当表达式变化时, Angular2将自动更新对应的DOM对象:

intepolate

上图的示例中,模板声明了h1的内容将绑定到组件实例的title变量。Angular2 框架将实时检测title的变化,并在其变化时自动更新DOM树中h1的内容。

修改模板,将“新闻来源”字段及内容移动到文章尾部。

 

HTML

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
    <title>template - bind model</title>
    <script type="text/javascript" src="lib/system@0.16.11.js"></script>
    <script type="text/javascript" src="lib/angular2.dev.js"></script>
    <script type="text/javascript" src="lib/system.config.js"></script>
</head>
<body>
	<ez-app></ez-app>
    <script type="module">
    	import {Component,View,bootstrap} from "angular2/angular2";
        
        @Component({selector:"ez-app"})
        @View({
        	template:`
                <div>
                	<h1>{{title}}</h1>
                    <div>
                    	<span>{{date}}</span> 来源:<span>{{source}}</span>
                    </div>
                    <p>{{content}}</p>
                </div>
            `
        })
        class EzApp{
        	constructor(){
            	this.title = "证监会:对恶意做空是有监测的";
                this.date = "2015年07月11日 15:32:35";
                this.source = "北京晚报";
                this.content = `
证监会新闻发言人邓舸昨天表示,近期,证监会要求所有上市公司制定维护股价稳定的方案,举措包括大股东增持、董监高增持、公司回购、员工持股计划、股权激励等,相关方案应尽快公布,并通过交易所平台向投资者介绍生产经营管理情况、加强投资者关系管理、维护股价稳定、做好投资者沟通工作。他介绍,该措施得到了上市公司大股东的积极响应,包括北京创业板董事长俱乐部、创业板首批28家公司实际控制人、浙江24家公司董事长等多个上市公司联盟以及大连、青岛、湖南等多地上市公司集体发声,宣布通过积极增持、回购、暂不减持等方式稳定公司股价。截至9日,两市已有655家公司公布股份增持、回购计划,积极维护公司股价稳定。
				`;
            }
        }
        
        bootstrap(EzApp);
    </script>
</body>
</html>

CSS

p{text-indent:30px;line-height:25px;}

 

© 著作权归作者所有

共有 人打赏支持
王福林
粉丝 10
博文 94
码字总数 37444
作品 0
徐汇
程序员
私信 提问
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
11/09
0
0
AngularDart4.0 英雄之旅-教程-03英雄编辑器

码云项目页:https://gitee.com/scooplolwiki/toh-1 在这一部分,您将修改起始应用程序以显示有关英雄的信息。 然后,您将添加编辑英雄信息的功能。 完成后,应用程序应该看起来像这个实例(...

scooplol
2017/10/22
0
0
【前端】—聊聊我认识的Angular

前言 最近接触的项目前端用到了Angular框架,之前略有耳闻,从vue换到Angular,感觉东西差不多,还是要系统学习的,先来了解下。 正文 1、Angular 的发展 AngularJS 是一款来自Google的前端J...

zt15732625878
05/19
0
0
AngularJs学习笔记--concepts(概念)

启动(Startup) 下面描述angular是如何启动的(参考图表与下面的例子): 1. 浏览器加载HTML,将HTML标签转换为DOM对象; 2. 浏览器加载angular.js的脚本; 3. Angular等待DOMContentLoade...

武文海
2015/02/06
0
0
JavaScript MVW 框架 - AngularJS

Angular JS (Angular.JS) 是一组用来开发 Web 页面的框架、模板以及数据绑定和丰富 UI 组件。它支持整个开发进程,提供 Web 应用的架构,无需进行手工 DOM 操作。 AngularJS 很小,只有 60K,...

匿名
2011/01/20
0
44

没有更多内容

加载失败,请刷新页面

加载更多

验证码

response生成验证码 验证码的作用:防止恶意注册、攻击等 网站上看到的验证码,实际上都是一些图片,而这些图片都是程序(Servlet)生成的! package day19.test; import java.awt.Color; i...

码农屌丝
40分钟前
0
0
day147-2018-11-14-英语流利阅读-待学习

《毒液》刚刚上映,创造漫威宇宙的人却走了 雪梨 2018-11-14 1.今日导读 中国的金庸创造了侠义英雄和江湖传奇,而大洋彼岸的斯坦·李也同样创造了一个绚烂璀璨的漫威宇宙,他构思的每个超级英...

飞鱼说编程
41分钟前
3
0
CentOS 安装PHP5和PHP7

安装PHP5 下载解压二进制包 [root@test-a src]# cd /usr/local/src/[root@test-a src]# wget http://cn2.php.net/distributions/php-5.6.32.tar.bz2[root@test-a src]# tar jxvf php-5.6......

野雪球
今天
4
0
修改jfinal默认的redis序列化方式

jfinal 越来越流行, jfinal的redis插件默认的序列化方式是fst。 但是系统中其他项目中用的是spring data redis中的StringRedisTemplate,所有的value都是通过gson转化成String放进去的。 直接...

采蘑菇的大叔
今天
1
2
windows上类似dnsmasq的软件Dual DHCP DNS Server

官网地址:http://dhcp-dns-server.sourceforge.net/官网定向的下载地址:https://sourceforge.net/projects/dhcp-dns-server/files/ 设置参考地址:http://blog.51cto.com/zhukeqiang/18264......

xueyuse0012
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部