Binding 指令实现双向数据绑定

Posted 野渡书生

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Binding 指令实现双向数据绑定相关的知识,希望对你有一定的参考价值。

代码

#方法一:ng-bind的使用
#方法二:{{}}插值表达式的使用
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>AngualrJS进阶</title> 
<link rel="stylesheet" type="text/css" href="css/foundation.css">
</head>
<body style="padding:10px;" ng-app="">
<div>
<input type="text" ng-model="uname">
<!--这里是模拟后台获取的数据,这里以input为例,需要规定类型ype以及ng-model属性-->
<div>{{"用户名:"+uname}}</div>
<!--这里的双向数据绑定符号{{}}不能省略,否则不会实现数据绑定功能;
在实际应用中使用的是http获取数据,然后输出-->
<br>
<h1 ng-block="">{{uname}}</h1>
<!--当AngularJS扫描到ng-block的时候,等待后面uname加载完移除class,然后显示h1标签-->
<br>
<div ng-bind="‘用户名:‘+uname"></div>
<!--这里ng-bind后面仍然可以使用{{}}进行数据绑定,但这里采用更为方便的双引号,里面字符输出用单引号-->
<div class="{{uname}}">{{uname}}</div>
<!--设置显示的class,这里如果输入CSS中具备的元素,如button等会显示Button按钮-->
</div>
</body>
<script type="text/javascript" src="js/angular.js"></script>
</html>

  

 

以上是关于Binding 指令实现双向数据绑定的主要内容,如果未能解决你的问题,请参考以下文章

Data Binding 的使用之一:简单的数据绑定

Data Binding 的使用之一:简单的数据绑定

android双向数据绑定data-binding使用include时的使用方法

梳理vue双向绑定的实现原理

vue双向数据绑定原理

手写vue双向绑定数据