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. Sql Server 高频,高并发访问中的键查找死锁解析

    死锁对于DBA或是数据库开发人员而言并不陌生,它的引发多种多样,一般而言,数据库应用的开发者在设计时都会有一定的考量进而尽量避免死锁的产生.但有时因为一些特殊应用场景如高频查询,高并发查询下由于数据库 ...

  2. 如何解决分布式系统数据事务一致性问题（HBase加Solr）

    如何解决分布式系统数据事务一致性问题 (HBase加Solr) 摘要:对于所有的分布式系统,我想事务一致性问题是极其非常重要的问题,因为它直接影响到系统的可用性.本文以下所述所要解决的问题是:对于入H ...

  3. 使用Number.parseFloat引发的悲剧

    起因: 前几天,项目中有人用了Number.parseFloat(xxx)方法.在Chrome和FF中是可以使用的.然而在IE中却报错,提示不存在这个function. Solution: 经查Jav ...

  4. Linux date命令的用法

    在linux shell编程中,经常用到日期的加减运算以前都是自己通过expr函数计算,很麻烦.其实date命令本身提供了日期的加减运算非常方便. 例如:得到昨天的时间date  --date=&qu ...

  5. nyoj 284 坦克大战 简单搜索

    题目链接:http://acm.nyist.net/JudgeOnline/problem.php?pid=284 题意:在一个给定图中,铁墙,河流不可走,砖墙走的话,多花费时间1,问从起点到终点至少 ...

  6. zsh

    一.简介 Zsh 也许是目前最好用的 shell,是 bash 替代品中较为优秀的一个.   二.优点 1)补全 zsh 的命令补全功能非常强大,可以补齐路径,补齐命令,补齐参数等. 按下 tab 键 ...

  7. 简单谈谈RAID

    RAID是“Redundant Array of Independent Disk”的缩写,翻译过来叫做独立磁盘的冗余阵列,其实就是磁盘的存储.访问.备份技术.在谈RAID之前,先简单学习一下存储器的 ...

  8. paypal IPN 接口返回INVALID参数可能问题

    工作于浏览器Chrome时,登录IPN Simulator页发送测试数据,payment_date栏位值中出现乱码,导致无法返回正确的VERIFIED,在此记录.

  9. volatile 关键字

    就象大家更熟悉的const一样,volatile是一个类型修饰符(type specifier).它是被设计用来修饰被不同线程访问和修改的变量.如果没有volatile,基本上会导致这样的结果:要么无 ...

  10. Listview的点击事件

    上篇文章总结了如何自定义listview的显示内容,然而listview不能只是提供显示功能,还必须能够点击它显示一些东西: listView.setOnItemClickListener(new O ...