1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > AngularJS之双向数据绑定 class绑定

AngularJS之双向数据绑定 class绑定

时间:2018-09-12 20:40:03

相关推荐

AngularJS之双向数据绑定 class绑定

之前一直都是用vue来完成一些日常开发,初入AngularJS,记录一些日常开发遇到的问题。

1、双向数据绑定

AngularJS与vue的区别在于,vue采用的是虚拟DOM,模板文件上绑定的一大堆指定指令什么的,最终并不会被编译到HTML DOM中,而AngularJS模板文件中编写的指令会切实存在HTML DOM中,作为元素的一个属性。这一点就决定了再vue中动态绑定v-model的方式为首先初始化好数据,然后再动态匹配,无法通过操纵元素属性的方式来实现:

<el-input v-if="item.type==='input'" :type="item.inputType" v-model='formData[item.id]'autocomplete="off" :placeholder="item.placeholder ? item.placeholder : ''"></el-input>

在AngularJS中,可以通过手动设置元素属性,然后再编译成AngularJS元素,具体实现如下:

angular.element($input).attr('ng-model', inputModel);$compile(angular.element($input))($scope);

2、class绑定

vue比较通俗易懂,直接:class={classA:true/fasle,classB: true/false};

AngularJS中,就有点区别了,true/false的class名用空格分开,根据中括号里面的判断条件的真假来决定显示的class,具体实现如下:

ng-class="{true:'fa fa-angle-up',false:'fa fa-angle-down'}[menu.orderManager]"

[]中的表达式是判断条件

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。