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

vue.js에서 데이터를 새로 고치고 변경하는 방법: [Vue.set()] 함수를 사용하여 수정합니다. 함수 형식은 [Vue.set(data,'para','value')]입니다. Vue가 생성될 때 전송된 데이터 객체의 이름입니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, Vue 버전 2.9.6, Dell G3 컴퓨터 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

【관련 추천 글 : 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>

관련 학습 권장 사항: js 비디오 튜토리얼

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