index6.html

绑定文本text

gt-text="{属性名}"

绑定标签属性attr

gt-attr="vm属性名称(标签属性,value表达式)"  如 gt-attr="uid(id,'view'+value)"

绑定标签属性css

gt-css="vm属性名称(标签属性,value表达式)"

同attr

绑定标签属性class

1.gt-class="vm属性名称(class名称:value表达式,class名称:value表达式,class名称:value表达式...)"

class 的value表达式比较特殊 value表达式为true 就绑定对应的属性 为fale 就不绑定对应的属性

2.gt-class-属性名="class名称:value表达式,class名称:value表达式,class名称:value表达式..." (可以绑定多个)

<html>

<head>

    <title>grootJs的属性绑定指令</title>

    <script src="jquery-1.11.2.min.js"></script>

    <script src="groot.js"></script>

    <style>

        .back0 {

            background-color: coral;

        }

        .back1 {

            background-color: forestgreen;

        }

    </style>

</head>

<body>

<div gt-view="myview">

    <div gt-css="c(color,value)">你好</div>

    <input gt-attr="uid(id,'view'+value)" type="text" gt-value-change="say"><span gt-text="{uid}+':说'+{say}"></span>

    <div>

        <ul gt-each="list">

           <li gt-class="$index(back0:value % 2 ==0,back1:value % 2==1)"><span gt-text="{$index}+1"></span><span>姓名:</span><span

                    gt-text="{name}"></span>---<span>性别:</span><span

                    gt-text="{sex}"></span></li>

        </ul>

    </div>

</div>

</body>

</html>

<script>

    groot.view("myview", function (vm, ve) {

        vm.list = [

            {"name": "张三", "sex": "男"}

            ,

            {"name": "李四", "sex": "男"}

            ,

            {"name": "王五", "sex": "男"}

        ];

        vm.uid = "123";

        vm.say = "word";

        vm.c = "red"

    })

</script>

grootJs的属性绑定指令的更多相关文章

  1. vuejs属性绑定和双向绑定

    属性绑定 html <div v-bind:title="title">hello world</div> js new Vue({ el:'#root', ...

  2. 2-4 Vue中的属性绑定和双向数据绑定

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Vue 属性绑定v-bing 事件绑定v-on

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. Vue2.0 -- 钩子函数/ 过度属性/常用指令/以及Vue-resoure发送请求

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. vue学习第一天：v-bind的使用（让属性绑定变量）

    v-bind的使用 v-bind: 是vue中,提供用于绑定属性的指令  例: <input type="button" value="按钮" title ...

  6. petite-vue源码剖析-属性绑定`v-bind`的工作原理

    关于指令(directive) 属性绑定.事件绑定和v-modal底层都是通过指令(directive)实现的,那么什么是指令呢?我们一起看看Directive的定义吧. //文件 ./src/dir ...

  7. 【WPF】如何把一个枚举属性绑定到多个RadioButton

    一.说明 很多时候,我们要把一个枚举的属性的绑定到一组RadioButton上.大家都知道是使用IValueConverter来做,但到底怎么做才好? 而且多个RadioButton的Checked和 ...

  8. Knockoutjs实例 - 属性绑定(Bindings)之流程控制(Control flow)

    一.foreach binding 使用此功能可以方便我们循环遍历输出某个数组.集合中的内容. (1).循环遍历输出数组 View Row Code 1 <script type="t ...

  9. 控制文本和外观------Attr Binding(attr属性绑定)

    Attr Binding(attr属性绑定) 目的 attr 绑定提供了一种方式可以设置DOM元素的任何属性值.你可以设置img的src属性,连接的href属性.使用绑定,当模型属性改变的时候,它会自 ...

随机推荐

  1. thumbnailator图片处理

    一.简介 thumbnailator是一个用来对图片对象进行操作的Java类库.通过它我们可以很方面的使用代码的方式,对图片进行一些操作.如缩放,裁减,旋转,水印等.thumbnailator项目主页 ...

  2. JQuery异步提交

    JQuery提交部分 $.ajax({ url:'www.baidu.com', //提交的地址,相当于form的action type:'POST', //提交方式,相当于form的method d ...

  3. 用PowerDesigner将SQL语句生成实体类

    1.首先打开PowerDesigner,点击左上角“File”—>"Reverse Engineer"—>"Database..." 2.选择数据库 ...

  4. (转载)web测试方法总结

    web测试方法总结 一.输入框 1.字符型输入框: (1)字符型输入框:英文全角.英文半角.数字.空或者空格.特殊字符“~!@#￥%……&*?[]{}”特别要注意单引号和&符号.禁止直 ...

  5. 令人哭笑不得的org.hibernate.MappingException: Unknown entity

    今天处理的任务是从一套系统中分离出微信易信功能代码添加到另一套系统中..本来是一个很简单的任务,但是分离移植过去后,一运行报了个错: nested exception is org.hibernate ...

  6. 如何去设计一个自适应的网页设计或HTMl5

    如何去设计一个自适应的网页设计或HTMl5 如今移动互联网随着3G的普及,越来越火爆,更多需求跟随而来!APP应用市场和APP应用数量成倍成倍的增长!从而给移动互联网带来新的挑战! 移动设备正超过桌面 ...

  7. 【C#】3.算法温故而知新 - 快速排序

    快速排序相比冒泡排序,每次交换是跳跃式的.每次排序的时候设置一个基准点,将小于等于基准点的数全部放到基准点的左边,将大于等于基准点的数放到基准点的右边.这样每次交换的时候就不会像冒泡排序一样只能在相邻 ...

  8. tarjan算法+缩点：求强连通分量 POJ 2186

    强连通分量:1309. [HAOI2006]受欢迎的牛 ★★   输入文件:cow.in   输出文件:cow.out   简单对比时间限制:1 s   内存限制:128 MB [题目描述] 每一头牛 ...

  9. iOS开发之——制作framework静态库教程

    环境: 硬件:macbook air 系统:OSX EI Capitan 版本:10.11.3 xcode : Version 7.2.1 (7C1002) 最近在做ios的静态库(据说framewo ...

  10. [转载]ExtJs4 笔记（11） Ext.ListView、Ext.view.View 数据视图

    本篇介绍两个用来展示数据的容器控件,分别是Ext.ListView和Ext.view.View.Ext.ListView就是大名鼎鼎的 Ext GridPanel的前身,不过现在的Ext4已经将它整合 ...