vue.js的v-bind

v-bind

v-bind  主要用于属性绑定，

html中的标签内：

        <div class="control-group">
            <label class="control-label">封面图：</label>

            <div class="controls">
                <input type="button" value="添加"  onclick="BrowseServer('image',2)" />
                <div id="app" class="box" style="width:100%">
                    <ul  style="overflow:hidden;margin:10px;padding:2px;list-style:none;">
                     <li  style="float:left;width:200px; height:200px; position:relative;"  >
                        <input id="imgeConId" type="hidden"  name="pic" v-bind:value="v_pic" />
                        <img v-bind:src="i_img"  alt="" style="position:absolute;left:0;top:0;bottom:0;right:0;max-width:200px;max-height:200px">
                    </li>
                </ul>
            </div>
        </div>

        </div>

js的代码：

var bannerPic='${hmlwxItinerantExhibition.bannerPic}';
            var im = '${ctn}'+'${hmlwxItinerantExhibition.pic}';
            var pic = '${hmlwxItinerantExhibition.pic}';
            if(bannerPic && bannerPic!=''){
                bannerPic=$.parseJSON(bannerPic);
            }else{
                bannerPic=[];
            }

             window.app=new Vue({
                el:"body",
                data:{
                    v_picList:bannerPic,
                    v_pic:pic,
                    i_img:im
                },
                watch:{

                },
                ready:function(){
                    var size = this.v_picList.length;
                    var newArray=[];
                    var c=0;
                    for(var i=0;i<size;i++){
                        var reg='^'+'${ctn}'+'\\S*';
                        if(this.v_picList[i].match(reg)){
                            newArray[c++]=this.v_picList[i];
                        }else{
                            newArray[c++]='${ctn}'+this.v_picList[i];
                        }
                    }
                    this.v_picList=newArray;
                    window.app=this;
                },
                methods:{
                imgDbClick:function(data){
                    var size=window.app.v_picList.length;
                    var newArray=[];
                    var c=0;
                    for(var i=0;i<size;i++){
                        if(i!=data){
                            newArray[c++]=window.app.v_picList[i];
                        }
                    }
                    window.app.v_picList=newArray;
                  }

                }
            });
        });

        function BrowseServer(inputId,type){
            var finder = new CKFinder() ;
            finder.basePath = '${ctx}/static/ckfinder/'; //导入CKFinder的路径
            if(type == 1){
                finder.selectActionFunction = SetFileField; //多张
            }
            else if(type == 2 ){
                finder.selectActionFunction = setPic; //单张
            }
            finder.selectActionData = inputId; //接收地址的input ID
            finder.popup() ;
            };
            //文件选中时执行
            function SetFileField(fileUrl,data)
            {
                window.app.v_picList.push(fileUrl);    

            }
            //封面
            function setPic(fileUrl,data){
            var patt2 = new RegExp(".jpeg|.jpg|.bng|.gif","g");
                if(!patt2.exec(fileUrl)){
                    top.$.jBox.alert("请选择图片类型数据");
                    return;
                }

                var NfileUrl = fileUrl.substring(fileUrl.indexOf('/',fileUrl.indexOf('/')+1));
                window.app.v_pic=NfileUrl;
                window.app.i_img=fileUrl;

            }

简单例子：

     <div class="control-group">
             <label class="control-label">详细分类缩略图：</label>
             <%-- <div class="controls">
                 <form:input path="classificationPic" htmlEscape="false" maxlength="100" class="input-xlarge "/>
             </div> --%>
             <div class="controls">
                 <input type="button" value="添加"  onclick="BrowseServer('image')" />
                 <div id="app" class="box" style="width:100%">
                     <ul  style="overflow:hidden;margin:10px;padding:2px;list-style:none;">
                      <li  style="float:left;width:200px; height:200px; position:relative;"  >
                         <input id="imgeConId" type="hidden"  name="classificationPic" v-bind:value="classificationPic" />
                         <img v-bind:src="img"  alt="" style="position:absolute;left:0;top:0;bottom:0;right:0;max-width:200px;max-height:200px">
                     </li>
                 </ul>
             </div>
         </div>

js的代码：

            var s = '${ctn}'+'${hmlwxClassification.classificationPic}'; 
             window.app = new Vue({
                  el: '#app',
                  data: {
                    classificationPic:s,
                    img:s
                  }
                }); 

//文件选中时执行
function SetFileField(fileUrl,data)
{
var NfileUrl = fileUrl.substring(fileUrl.indexOf('/',fileUrl.indexOf('/')+1));
window.app.classificationPic=NfileUrl;
window.app.img=fileUrl;

}