直接给vue数组赋值，无法渲染到页面

来源：互联网发布：淘宝卖店铺编辑：程序博客网时间：2024/05/21 08:59

直接操作vm.passwordArr, 无法渲染, 需要设置theArr, 最后使vm.passwordArr=需要设置theArr

<div id="app"><input maxlength="6" type="text" v-model="password"><ul><li v-for="(value, index) in passwordArr"><span v-if="value">1</span></li></ul><button v-on:click="showLi">渲染</button></div>

<script>    var vm = new Vue({        el: "#app",        data: {            password: '',            passwordArr: [1,1,1,0,0,0]        },        methods: {            showLi: function() {                var theArr = [];                for (var i = 0; i < vm.passwordArr.length; i++) {                    if (i<vm.password.length) {                        theArr[i] = 1;                    } else {                        theArr[i] = 0;                    }                                         }                vm.passwordArr = theArr;            }        }    })</script>

错误示范：

<script>var vm = new Vue({el: "#app",data: {password: '',passwordArr: [1,1,1,0,0,0]},methods: {showLi: function() {var theArr = [];        for (var i = 0; i < vm.passwordArr.length; i++) {        if (i<vm.password.length) {        // 这样写是无效的        vm.passwordArr[i] = 1;        } else {        vm.passwordArr[i] = 0;        }                 }}}})</script>

阅读全文

0 0