码迷,mamicode.com
首页 > 其他好文 > 详细

Vue的基本用法实例

时间:2020-01-16 14:31:34      阅读:76      评论:0      收藏:0      [点我收藏+]

标签:tle   initial   style   label   span   title   watch   function   使用   

一、定义并实例化容器

 $(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>

 

Vue的基本用法实例

标签:tle   initial   style   label   span   title   watch   function   使用   

原文地址:https://www.cnblogs.com/firstcsharp/p/12200521.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!