2019-08-21 vue在项目中的基本使用

2019-08-21  本文已影响0人  tanbin_tech

vue目前在我部门项目中的用处就是* 双向绑定 *
js处理后数据变化html显示也要跟着变化,比如ajax请求后对数据进行修改,那么页面显示就会自动改变,同样的,html那边变化了js中的数据变量也要变化,比如用户输入数据后,在js中绑定的那些数据也会更新,常用与提交操作。

比如html有个列表

<select class="input-box" id="PersonService" name="personService" style="width: 207px"
        onchange="setEnabled(this)">
        <option value="0">请选择服务用途(必选)</option>
        <option v-if="serviceList" v-for="(item, index) in serviceList"
                :value="item.code" v-text="item.name">
        </option>
        <option value="29">其他</option>
</select>

js那就用vue通过列表的id将他绑定起来

var personalServiceVue = new Vue({
    el: '#PersonService',
    data: {
        serviceList: null
    },
    mounted: function () {
        $.ajax({
            success: function(data) {
                  personalServiceVue.serviceList = data;
             }
        });
    }
})

ajax请求完成后就将数据赋值给vue绑定的变量

上一篇 下一篇

猜你喜欢

热点阅读