vue.js를 새로 고쳐 데이터를 변경하는 방법

vue.js를 새로 고쳐 데이터를 변경하는 방법: 수정하려면 [Vue.set()] 함수를 사용하세요. 함수 형식은 [Vue.set(data,'para','value')]입니다. Vue가 생성되었을 때 전송된 데이터 객체의 이름입니다.

이 튜토리얼의 운영 환경: windows10 시스템, vue2.9, 이 기사는 모든 브랜드의 컴퓨터에 적용 가능합니다.

【관련 추천 글: vue.js】

vue.js를 새로 고쳐 데이터를 변경하는 방법:

Vue 객체가 생성되면 Vue 객체의 데이터만 수정하면 페이지에 나타나지 않습니다. 자동으로 업데이트됩니다. 수정하려면 Vue.set() 함수를 사용해야 합니다. 함수 형식은 Vue.set(data,'para','value')이며, 여기서 data는 Vue가 생성될 때 전송되는 데이터 개체의 이름입니다. 두 개의 매개변수는 각각 데이터 객체의 변수 이름과 값입니다.

페이지 초기화 코드:

<script type="text/javascript" charset="utf-8">
    mui.init();
    var data = {
        dx: 1400,
        wcyj: 0,
        jj: 0,
        tcbl: 0,
        tcje: 0,
        total: 0
    };
    $(document).ready(function() {
  
        var v = new Vue({
            el: &#39;#result&#39;,
            data: data
        })
    })
</script>

Vue 템플릿의 변수를 수정하기 위해 js를 사용해야 하는 코드:

<script type="text/javascript">
    function calc() {
        $("#result").show();
        yj = $("#yeji").val();
        Vue.set(data, &#39;wcyj&#39;, yj);
        if(yj < 40000) {
            Vue.set(data, &#39;tcbl&#39;, 0.04);
            Vue.set(data, &#39;jj&#39;, 0);
        } else if(yj < 80000) {
            Vue.set(data, &#39;tcbl&#39;, 0.05);
            Vue.set(data, &#39;jj&#39;, 400);
        } else if(yj < 120000) {
            Vue.set(data, &#39;tcbl&#39;, 0.06);
            Vue.set(data, &#39;jj&#39;, 1000);
        } else {
            Vue.set(data, &#39;tcbl&#39;, 0.07);
            Vue.set(data, &#39;jj&#39;, 1500);
        }
        data.tcje = (yj * data.tcbl).toFixed(1);
        data.total = (parseFloat(data.tcje) + parseFloat(data.dx) + parseFloat(data.jj));
    }
  
</script>

관련 무료 학습 권장 사항: JavaScript ( 영상)

위 내용은 vue.js를 새로 고쳐 데이터를 변경하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!