<template class="iceView">
    <p class="title-l">普通写法的select：{{select}}</p>
    <select class="select" i-model="select">
        <option value="冰清玉洁">冰清玉洁</option>
        <option value="高贵雅典">高贵雅典</option>
        <option value="倾国倾城">倾国倾城</option>
        <option value="鱼沉雁落">鱼沉雁落</option>
    </select>
    <button i-onclick="edit">修改为冰清玉洁</button>
    <p class="title-l">使用i-for循环生成option的select：{{cateValue}}</p>
    <select class="select" i-model="cateValue">
        <option i-for="cate" value="{{item.value}}">{{item.name}}</option>
    </select>
    <p class="title-l">使用i-bind的select：{{arrValue1}} </p>
    <select class="select" i-bind="arr1" i-model="arrValue1"></select>
    <p class="title-l">使用i-bind绑定其它格式的select：{{arrValue2}} </p>
    <select class="select" i-bind="arr2" i-value="id" i-name="content" i-model="arrValue2"></select>
    <p class="title-l">input：{{input}}</p>
    <input type="text" class="w12" i-model="input">
    <p class="title-l">数组中的input，动态给数组赋值，无需写任何一行代码</p>
    <ul>
        <li i-for="list">姓名：{{item.name}} 爱好：{{item.love}} <input type="text" i-model="{{item.love}}"></li>
    </ul>
    <p class="title-l">textarea：{{textarea}}</p>
    <textarea class="w12" i-model="textarea"></textarea>
    <p class="title-l">radio：{{radio}}</p>
    <label><input type="radio" name="radio" i-model="radio" value="小蓝"> 小蓝</label>
    <label><input type="radio" name="radio" i-model="radio" value="小红"> 小红</label>
    <p class="title-l">checkbox：{{checkbox[0]}}{{checkbox[1]}}</p>
    <label><input type="checkbox" i-model="checkbox" value="小黄"> 小黄</label>
    <label><input type="checkbox" i-model="checkbox" value="小黑"> 小黑</label>
</template>
<script>
    ice.view({
        input: 'ICEUI是个漂亮的前后端框架',
        select: '倾国倾城',
        cateValue: '天上人间',
        cate: [
            { value: '天上人间', name: '天上人间' },
            { value: '染指年华', name: '染指年华' },
            { value: '伊人夕岸', name: '伊人夕岸' },
            { value: '翰墨流离', name: '翰墨流离' },
        ],
        arrValue1: '',
        arr1: [
            { value: '艺静香', name: '艺静香' },
            { value: '蓝夜媚', name: '蓝夜媚' },
            { value: '冬天楼', name: '冬天楼' },
        ],
        arrValue2: '',
        arr2: [
            { id: '艺静香', content: '艺静香' },
            { id: '蓝夜媚', content: '蓝夜媚' },
            { id: '冬天楼', content: '冬天楼' },
        ],
        list: [
            { name: '田蕊', love: '读书、写字' },
            { name: '百灵', love: '静坐、瑜伽' },
            { name: '余香', love: '跑步、看海' },
        ],
        textarea: 'ICEUI是最高雅的',
        radio: '',
        checkbox: ['小黑'],
        edit: function () {
            this.select = '冰清玉洁';
        },
        onload() {
            //用于美化下拉菜单
            ui.select();
        }
    })
</script>

<template class="iceView">
    <h3>{{text}}</h3>
</template>
<script>
    ice.view({
        text: '我是小猫咪',
        onload: function () {
            window.setTimeout(() => {
                this.text = 'onload执行了';
            }, 3000);
        },
    })
</script>

/**
* ajax请求
* @param json：如果为string字符串时，则为url，如果为json对象时，参数说明如下：
*     url：      请求地址
*     type：     请求类型，默认为post，可选值：post，get
*     timeout：  网络超时，默认为15000毫秒
*     async：    异步，默认为true
*     data：     要求为Object或String类型的参数，发送到服务器的数据
*     json：     是否将请求过来的数据自动转为json对象，默认为true
*     success：  请求成功之后的回调函数
*     error：    请求失败之后的回调函数
*     complete： 不管请求成功还是失败，都会调用
* @param data：json传参为string字符串时此参数有效，等同于json.data
* @return {object}
*/
ice.view({
    onload: function(){
        //第一种写法
        this.ajax({
            url: 'https://iceui.cn/doc/data/table.json',
            data: {cid: 2},
            success(res){
                console.log(res);
            }
        })
        //第二种写法，支持Promise
        this.ajax('https://iceui.cn/doc/data/table.json',{cid: 2}).then(res=>{
            console.log(res);
        })
    },
})

<template class="iceView">
    <div class="title-l">文章列表</div>
    <div class="item-disc">
        <div i-for="list">{{item.title}}</div>
    </div>
</template>
<script>
    ice.view({
        onload: function(){
            this.ajax('https://iceui.cn/doc/data/table.json').then(res=>{
                this.list = res.list;
            })
        }
    })
</script>

<template class="iceView">
    <input type="text" id="name">
    <input type="text" id="sex">
    <input type="text" id="resume">
</template>
<script>
    var v = ice.view({
        name: '闫妹',
        sex: '女',
        resume(str){
            return str + '我什么都不想干！';
        }
    });
    ice('#name').val(v.data.name);
    ice('#sex').val(v.data.sex);
    ice('#resume').val(v.data.resume('老天，'));
</script>