在C#的MVC中 Vue的基本用法实例

一、定义并实例化容器

 $(function () {
        var vueObj = new Vue({
            el: "#step-2",
            data: {
                IsRequired:0,
                PrepayMonths: 0,
                MakeUpMonths: 0,
                Title:'',
                ExtraInfo: [],
                SSCityType: [],
                PFCityType:[]
            },
            watch: {

            }
        });
        initialPage();
    });

二、给容器赋值

AjaxJson("../../Sh/GetCityData?cityId=" + cityId, "get", null, function (data) {
    console.info(data);
    if (data.SSCityType.length != 0) {
        vueObj.IsRequired = data.IsRequired;
        vueObj.PrepayMonths = data.PrepayMonths;
        vueObj.MakeUpMonths = data.MakeUpMonths;
        vueObj.ExtraInfo = data.ExtraInfo;
        vueObj.SSCityType = data.SSCityType;
        vueObj.PFCityType = data.PFCityType;
        ……                
    }
})

 三、各种使用方法

1、动态style和input属性

<div class="form-input">
 <label :style="{color:(IsRequired==1?'#ccc':'#000')}"><input type="radio" name="IsSS" id="IsSS" value="2" :disabled="IsRequired==1">否</label>
</div>

2、循环使用及input动态属性是否选中

 <label v-for="(item,index) in SSCityType" :key="index">
   <input type="radio" name="InsuredTypeId" id="InsuredTypeId" :value="item.CityTypeId" :checked="index==0">{{item.Name}}                                    
</label>

 3、实时监听输入框事件

<input type="number" id="SSDIY" v-on:input="checkValue"/>

checkValue是个js方法

 4、监听输入框失去焦点事件

<input type="number" id="SSDIY" v-on:blur="checkValue" />