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. java web中日期Date类型在页面中格式化显示的三种方式

    一般我们经常需要在将服务器端的Date类型,传到页面进行显示,这就涉及到一个如何格式化显示Date类型的问题,一般我们有三种方式进行: 1)在服务端使用SimpleDateFormat等类格式化成字符 ...

  2. CityEngine Web Scene如何在IIS下部署 [转]

    CityEngine2012新增了发布Web场景的功能,可以通过本地的Web Scene Viewer打开,也可以发布到ArcGIS Online云端进行共享.如下图:   注:3ws场景包制作方法: ...

  3. echo

    echo $echo [-e] [内容字符串]显示后面的内容,缺省选项表示将后面的内容原模原样的显示出来,如果后面接的字符串不用"",会默认以空格为分隔符输出多个串 可以配合She ...

  4. Linux 之创建工作目录-mkdir

    在Linux下创建工作目录,一般使用 "mkdir" 指令,一下将介绍"mkdir"指令的使用方法,供大家参考. 一.使用帮助 在Linux终端(命令行)输入: ...

  5. zsh

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

  6. Hadoop 数据库 - HBase

    转自:http://blog.csdn.net/iAm333 1 什么是HBase? HBase,是Hadoop Database,是一个高可靠性.高性能.面向列.可伸缩的分布式存储系统.使用HBas ...

  7. 【温故而知新-Javascript】为DOM元素设置样式

    1. 使用样式表 可以通过document.styleSheets属性访问文档中可用的CSS样式表,它会返回一组对象集合,这些对象代表了与文档管理的各个样式表. 每个样式表 都由一个CSSStyleS ...

  8. Rem实现自适应初体验

    第一次做移动端的页面,遇到的第一个问题就是移动端的轮播图.其实轮播图的插件有很多,但是完全满足需求的并不容易找. 需求: 1.实现基本的触屏轮播图效果 2.传入非标准比例的图片,可以自动平铺(有时候图 ...

  9. WinCE应用程序崩溃提示框的处理

    WinCE的开发人员和WinCE设备的用户应该对下面这两个错误不陌生,"Application encountered a serious error and must shut down& ...

  10. java 21 - 13 IO流之 合并流

    SequenceInputStream :表示其他输入流的逻辑串联. 构造方法摘要 SequenceInputStream(Enumeration<? extends InputStream&g ...