jquery下的双向绑定快速实现 way.js

原创
2017/06/18 09:16
阅读数 2.6K

way.js 不和vue.js一样,vue操作是的是虚拟DOM,way直接操作实际DOM,因而直接用jquery的选择器设置获取值。

github上例子很多

//电商含运费成本计算器
<script type="text/javascript">
    $(function () {
        way.clear();//不需要存储功能
        way.watchAll(function (selector, value) {//双向绑定
            $('#result').text(function () {
                var strs = new Array();
                strs = $('#postage').val().split("+");
                return Math.round(parseFloat($('#prince').val()) + (Math.ceil($('#weight').val()) - 1) * parseFloat(strs[1])
                    + parseFloat(strs[0]) + parseFloat($('#gift').val()));
            });
         });       
    });
</script>

<form way-data="myForm" way-persistent="true" class="form-inline">

    <p>
        <span style=" font-size: 18px">进价</span><input type="text" name="prince" id="prince"
                                                       class="form-control input-lg"
                                                       style="width: 120px">&nbsp;
        <span style=" font-size: 18px">重量</span><input type="text" name="weight" id="weight"
                                                       class="form-control input-lg"
                                                       style="width: 120px">&nbsp;
        <span style=" font-size: 18px">邮费</span> <input type="text" name="postage" id="postage"
                                                        class="form-control input-lg" style="width: 140px">
    </p>
    <p>
        <span style=" font-size: 18px">赠品</span><input type="text" name="gift" id="gift" class="form-control input-lg"
                                                       style="width: 120px">&nbsp;
        <span style=" font-size: 18px">售价</span><input type="text" name="sale" id="sale" class="form-control input-lg"
                                                       style="width: 120px">
    </p>
</form>

<hr>
<p>
<p><span style="font-weight: bold; color: red;font-size: 24px">成本价:<span id="result"></span></span></p>
展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
0 评论
1 收藏
0
分享
返回顶部
顶部