代码

#方法一：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 指令实现双向数据绑定的更多相关文章

  1. 《AngularJS权威教程》中关于指令双向数据绑定的理解

    在<AngularJS权威教程>中,自定义指令和DOM双向数据绑定有一个在线demo,网址:http://jsbin.com/IteNita/1/edit?html,js,output,具 ...

  2. Vue基础01vue的基本示例，vue的双向数据绑定，vue中常见的几种用法，vue相关常见指令

    自学vue框架,每天记录重要的知识点,与大家分享!有不足之处,希望大家指正. 本篇将讲述:vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令 前期学习基础,使用vue. ...

  3. Vue学习之路第九篇：双向数据绑定 v-model指令

    1.学习准备: ①:双向数据绑定可以简单理解为:后端定义的数据改变,前端页面展示的时候会自动改变,数据通过前端页面修改的时候,后端定义的数据内容也会随之改变. ②:指令中只有v-model可以实现双向 ...

  4. Vue指令之`v-model`和`双向数据绑定

     v-bind 只能实现数据的单向绑定,从 M 自动绑定到 V, 无法实现数据的双向绑定 <input type="text" v-bind:value="msg& ...

  5. Vue学习笔记【7】——Vue指令之v-model和双向数据绑定

    v-model是唯一可以实现双向数据绑定的vue指令 单向数据绑定:修改内存中的数据,页面上同步更改.v-bind <!-- v-bind 只能实现数据的单向绑定,从 M 自动绑定到 V, 无法 ...

  6. javascript实现双向数据绑定

    双向数据绑定已经是面试中经常被问到的点,需要对原理和实现都要有一定了解. 下面是实现双向绑定的两种方法: 属性劫持 脏数据检查 一.属性劫持 主要是通过Object对象的defineProperty方 ...

  7. JavaScript实现简单的双向数据绑定

    什么是双向数据绑定 双向数据绑定简单来说就是UI视图(View)与数据(Model)相互绑定在一起,当数据改变之后相应的UI视图也同步改变.反之,当UI视图改变之后相应的数据也同步改变. 双向数据绑定 ...

  8. Vue双向数据绑定原理分析（转）

    add by zhj: 目前组里使用的是前端技术是jQuery + Bootstrap,后端使用的Django,Flask等,模板是在后端渲染的.前后端没有分离,这种做法有几个缺点 1. 模板一般是由 ...

  9. vue的双向数据绑定实现原理

    在目前的前端面试中,vue的双向数据绑定已经成为了一个非常容易考到的点,即使不能当场写出来,至少也要能说出原理.本篇文章中我将会仿照vue写一个双向数据绑定的实例,名字就叫myVue吧.结合注释,希望 ...

随机推荐

  1. 2019牛客暑期多校训练营（第一场）-E（DP）

    题目链接:https://ac.nowcoder.com/acm/contest/881/E 题意:求可分解成n个AB和m个BA的字符串的个数. 思路: 首先根据贪心思想,前n个A可作为AB的A,后m ...

  2. PTA(Basic Level)1037.在霍格沃茨找零钱

    如果你是哈利·波特迷,你会知道魔法世界有它自己的货币系统 -- 就如海格告诉哈利的:"十七个银西可(Sickle)兑一个加隆(Galleon),二十九个纳特(Knut)兑一个西可,很容易.& ...

  3. [Codeforces 266E]More Queries to Array...(线段树+二项式定理)

    [Codeforces 266E]More Queries to Array...(线段树+二项式定理) 题面 维护一个长度为\(n\)的序列\(a\),\(m\)个操作 区间赋值为\(x\) 查询\ ...

  4. 2019中山纪念中学夏令营-Day14 图论初步【dijkstra算法求最短路】

    Dijkstra是我学会的第一个最短路算法,为什么不先去学SPFA呢?因为我在luogu上翻到了一张比较神奇的图: 关于SPFA -它死了 以及网上还有各位大佬的经验告诉我:SPFA这玩意很容易被卡. ...

  5. CSS3面包屑菜单导航

    在线演示 本地下载

  6. Linux-1.3目录结构，基础命令

    1.Linux目录结构 2.Linux基础命令(常用) ctrl+alt+T(打开终端) cd 切换文件夹(pwd查看当前目录) cd /home 绝对路径 以根目录开头 cd admin 相对路径 ...

  7. MVC 部署到服务器

    1.Nuget程序包管理 —>程序包管理控制台,运行以下命令即可:Update-Package Microsoft.AspNet.WebApi -reinstall 2.dll文件的缺少,覆盖

  8. 机器学习-SVM-核函数

    SVM-核函数 在研究了一天的SVM核函数后,我顿悟了一个道理: 研究和使用核函数的人,从一开始的目的就是把data分开而已.高维和映射,都是原来解释操作合理性的,但根本不是进行这一操作的原因 我为什 ...

  9. 【Java面试题】解释内存中的栈（stack）、堆(heap)和静态存储区的用法

    Java面试题:解释内存中的栈(stack).堆(heap)和静态存储区的用法 堆区: 专门用来保存对象的实例(new 创建的对象和数组),实际上也只是保存对象实例的属性值,属性的类型和对象本身的类型 ...

  10. linux系统awk命令

    awk是行处理器: 相比较屏幕处理的优点,在处理庞大文件时不会出现内存溢出或是处理缓慢的问题,通常用来格式化文本信息awk处理过程:?依次对每一行进行处理,然后输出awk命令形式:awk [-F|-f ...