zoukankan      html  css  js  c++  java
  • colaui基础

    监控 c-watch

    //    监控的方法函数 on  监控的参数名字
    div(c-watch="fun on style" c-bind="styles")
    
    //    js
    fun(dom,model){
        console.log(dom) // 直接获取dom,只触发一次
        dom.style.background  = 'red'
        console.log(model)    //    获取到的dom
    },

    类名样式c-class

    //    html
    div(c-class="styles == 'red' ? 'blue' :'red'") 
        
    //    js
    model.set('styles','red')
    button(c-onclick="changes()") 按钮
    
    changes(){
        if(model.get('styles') == 'red'){
            model.set('styles','blue')
        }else{
            model.set('styles','red')
        }
        console.log(model.get('styles'))
    },

    行间样式 c-style

    //    html
    div(c-style="color:bgColor")颜色改变
    div(c-style="fontSize:30") 直接写死
    
    //    引入js
    append scripts
        script(src="policycenter/atest/atest.js")
    
    //js
    model.set('bgColor','red')

    隐藏c-display

    <span c-bind="isshow"></span>
    <button c-onclick="change()" c-bind="isshow">anniu</button>
    
    model.set('isshow', true)
    //    需要放在cola里面
    model.action({
        change() {
            if (model.get('isshow')) {
                console.log(1)
                model.set('isshow', false)
            } else {
                model.set('isshow', true)
            }
        }
    })

    定义别名

    //    定义的路径 as 改的名字
    div(c-alias="items as it")
    //    下面试循环
        div(c-repeat="item in it" c-bind="item.age") 
    
    cola(function(model){
        model.set('items',[
            {'name':'x','age':1},
            {'name':'a','age':11},
            {'name':'q','age':13}
        ])
    })

    定义script

    extends /_page
    
    append head
    block body
        div(c-alias="directions as ds")
            li(c-repeat="d in ds" c-bind="d.text")
    append scripts
        script.
            cola(function (model) {
                model.set("directions", [
                    {value: "east", text: ""},
                    {value: "south", text: ""},
                    {value: "west", text: "西"},
                    {value: "north", text: ""}
                ]);
            });
    
    append scripts
        script(src="policycenter/atest/atest.js") 

    循环 c-repeat

    //    和vue绑定事件一样;
    //    c-bind用于双相绑定和显示
    div(c-repeat="item in items" c-bind="item.age") 
    
    cola(function(model){
        model.set('items',[
            {'name':'x','age':1},
            {'name':'a','age':11},
            {'name':'q','age':13}
        ])
    })

    双向绑定 c-bind

    //    事件绑定
    spn(c-bind="name")
    c-input(type="text" c-bind="name")
    
    cola(function(model){
        model.set('name','xioaming');
    })

    获取自己的value值

    lonePrincipalChange(self,arg) {
        var lonePrincipal = Number(self.get("value"));
    },

    获取值

    获取值理论上讲  遇到循环就用current
    console.log(model.get("actual.plcSolution.plcPackage.plcMainClause.$oriCurAmount"))
    console.log(model.get("actual.plcSolution.plcPackage").current.get('plcMainClause.$oriCurAmount'))
    

    检查这个字段有没有数据

    cola.util.dictionary('VehicleUseNature')
  • 相关阅读:
    JSP作业2017.4.5
    WEB(JSP)下的JDBC操作
    application下的JDBC操作(JSP应用与开发)
    JSP的指令inclue和动作include的区别
    大牛的博客
    seajs
    tomcat配置js压缩
    angular启动过程原理
    java并发编程
    为什么要定义interface和implements
  • 原文地址:https://www.cnblogs.com/qdwds/p/11704479.html
Copyright © 2011-2022 走看看