在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" />