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. 解读Python发送邮件

    解读Python发送邮件 Python发送邮件需要smtplib和email两个模块.也正是由于我们在实际工作中可以导入这些模块,才使得处理工作中的任务变得更加的简单.今天,就来好好学习一下使用Pyt ...

  2. wampserver安装之后连接phpMyAdmin 不成功的解决方法

    情况:我原先安装了本地的mysql数据库,默认密码不是为空,而是123456,但是wampserver安装默认mysql的密码是为空的.所以需要修改一下默认的配置.不然会出现连不上数据库. 解决方案: ...

  3. loadrunner常用函数

    1.关联函数:web_reg_save_param("session", "LB=value=", "RB=>", LAST);

  4. javascript 特效实现(2)——回到顶部效果

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

  5. Docker与容器快速入门

    Docker之风席卷全球,但很多人觉得docker入门确实不太容易,其原因在于很多知识点上没准备好,在docker解决了什么问题.怎么解决的.用什么技术解决的都还没想清楚的时候就去探索docker组件 ...

  6. 最小生成树 kruskal hdu 5723 Abandoned country

    题目链接:hdu 5723 Abandoned country 题目大意:N个点,M条边:先构成一棵最小生成树,然后这个最小生成树上求任意两点之间的路径长度和,并求期望 /************** ...

  7. YOU ARE MY SUNSHINE

    /*you are sunshine, my only sunshine, you make me happy when skies are grey. you'll never know dear ...

  8. Linux安装Redis

    环境:Centos 6.2 redis是当前比较热门的NOSQL系统之一,它是一个key-value存储系统.和Memcached类似,但很大程度补偿了memcached的不足,它支持存储的value ...

  9. Linux安装telnet

    安装环境:CentOS 6.4    上篇已经讲述了memcached的安装,现在要测试Memcached功能的时候,需要使用到telnet服务.于是就有了本篇.   一.安装telnet 1.检测t ...

  10. find命令错误提示路径必须在表达式之前

    在某些版本的linux下,通过find查找当前目录下所有后缀名jpg的文件,命令为find ./ -iname *.jpg 会出现“find: 路径必须在表达式之前”的错误提示.解决的方法有两种 a. ...