美文网首页
2019-08-21 vue在项目中的基本使用

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

作者: tanbin_tech | 来源:发表于2019-08-21 18:35 被阅读0次

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绑定的变量

相关文章

网友评论

      本文标题:2019-08-21 vue在项目中的基本使用

      本文链接:https://www.haomeiwen.com/subject/wviisctx.html