layui switch組件使用總結

layui switch組件使用總結：
1.引入 layui.js 或layui.all.js文件。
2.放入組件的標簽：可以用經過簡化的：
<div class="layui-form" >
          
                <input  type="checkbox" :id="item.Id" @click.stop="clickMe" name="switch" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF"/>
                 
</div>
可以設置樣式： .layui-form-switch 來調整大小等樣式
3.初始化組件：這個過程需要在vue的updated生命周期中完成。


 //vue生命周期：數據發生改變后
    updated: function () {
        layui.use(['form'], function () {
            //加載layui的表單組件樣式
            form.render();
        })
    }
4.//組件的事件可以寫在初始化中，也可以寫在jq的onload事件中

layui.use(['form'], function () {
        form = layui.form
            , layer = layui.layer
        //監聽指定開關
        form.on('switch(switchTest)', function (data) {
           //獲取當前的新聞的id
            var id = data.elem.id;
            //是否置頂
            var is_top = "";
            if (this.checked) {
                is_top = "1";
                //layer.msg('開關checked：' + (this.checked ? 'true' : 'false'), {
                //    offset: '6px'
                //});
                //layer.tips('溫馨提示：請注意開關狀態的文字可以隨意定義，而不僅 僅是ON|OFF', data.othis)
            } else {
                is_top = "0";
                //layer.msg('開關： 關掉了', {
                //    offset: '6px'
                //});
            }
            //do some ajax opeartiopns;
            //修改當前的新聞的狀態
            var url = "";
            var data = {};
            var res = pub_ajax(url, data);
            //刷新頁面
            RefreshData();
        });

其中第3步驟是最關鍵的，必須在vue的update生命周期中執行組件的render()函數才能顯示組件。