vue.js 计算属性 computed的用法举例 | 基于实例代码分步讲解一站式学习Java

双向绑定

监听属性

工具版本兼容问题

步骤 1 : 先看不用 computed
步骤 2 : 再看看 computed 的做法
步骤 3 : method 也能达到一样的效果
步骤 4 : computed 和 methods 的区别

步骤 1 :

先看不用 computed

顶折

先看不用 computed ，直接在 {{}} 上运行

"); window.frames["iframe_show7810"].document.write(decodeHtml($("textarea#stepcodeTextarea7810").val())); window.frames["iframe_show7810"].document.close(); $(window.frames["iframe_show7810"]).load(function(){ $("#iframe_show7810").height($("#iframe_show7810").contents().find("body").height()+showittryitheight); }); $("#iframe_show7810").height($("#iframe_show7810").contents().find("body").height()+showittryitheight); setTimeout(function(){ },500); });

运行效果

代码行数较多，请点击查看

<script src="http://127.0.0.1/study/vue.min.js"></script>
    
<style>
table tr td{
    border:1px solid gray;
    padding:10px;
     
}
table{
    border-collapse:collapse;
    width:800px;
    table-layout:fixed;
}
tr.firstLine{
    background-color: lightGray;
}
</style>
  
<div id="div1">
    
    <table align="center" >
        <tr class="firstLine">
            <td>人民币</td>
            <td>美元</td>
        </tr>       
        <tr>
        	<td align="center" colspan="2">
        	汇率： <input type="number" v-model.number="exchange" />
        	</td>
        </tr>
        
        <tr>
        
        	<td align="center">
        		￥: <input type="number" v-model.number = "rmb"  />
        	</td>
        	<td align="center">
        		$: {{ rmb/exchange }}
        	</td>
        </tr>
    </table>
  
</div>
     
<script>
   
new Vue({
      el: '#div1',
      data: {
    	  exchange:6.4,
          rmb:0
      }
    })
     
</script>

"); window.frames["iframe7810"].document.write(decodeHtml(code7810)); window.frames["iframe7810"].document.close(); //load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe7810"]).load(function(){ $("#iframe7810").height($("#iframe7810").contents().find("body").height()+showittryitheight); }); $("#iframe7810").height($("#iframe7810").contents().find("body").height()+showittryitheight); alreadyWriteCode7810 = code7810; $("#rendering7810").hide(); $("#rendered7810").show(); } var tRereshRetry2DemoPanel7810 = setInterval(rereshRetry2DemoPanel7810,1000); var binded7810 = false; $("textarea#stepcodeTextarea7810").keyup(function(){ if(!binded7810){ $(window).bind('beforeunload',function(){ binded7810 = true; return "xxxx"; }); } var newCode = $(this).val() code7810 = newCode; /*below code is replaced by function rereshRetry2DemoPanel()*/ // if(code7810!=newCode){ // window.frames["iframe7810"].document.write("

"); // window.frames["iframe7810"].document.write(decodeHtml($("textarea#stepcodeTextarea7810").val())); // window.frames["iframe7810"].document.close(); // $(window.frames["iframe7810"]).load(function(){ // $("#iframe7810").height($("#iframe7810").contents().find("body").height()+showittryitheight); // }); // code7810 = newCode; // } }); $(".tryButton7810").click(function(){ $("#tryDiv7810").show(); $("#stepcodeTextarea7810").focus(); $("#stepcodeTextarea7810").height(200); $("#iframe7810").height(0); window.frames["iframe7810"].document.write("

"); window.frames["iframe7810"].document.write(decodeHtml($("textarea#stepcodeTextarea7810").val())); window.frames["iframe7810"].document.close(); //load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe7810"]).load(function(){ $("#iframe7810").height($("#iframe7810").contents().find("body").height()+showittryitheight); }); $("#iframe7810").height($("#iframe7810").contents().find("body").height()+showittryitheight); this.scrollIntoView(true); editor7810.focus(); editor7810.setSize(null, "250"); $("#rendering7810").hide(); $("#rendered7810").hide(); }); var mixedMode = { name: "htmlmixed", scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i, mode: null}, {matches: /(text|application)\/(x-)?vb(a|script)/i, mode: "vbscript"}] }; var editor7810 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea7810"), { lineNumbers: true, styleActiveLine: true, matchBrackets: true, mode:"text/html", theme:"eclipse", selectionPointer: true, lineWrapping: true, extraKeys: { "Alt-/": "autocomplete", "Ctrl-F": "findPersistent", "F8": function(cm) { cm.setOption("fullScreen", !cm.getOption("fullScreen")); }, "Esc": function(cm) { if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false); } } }); editor7810.on("change",function(doc){ if(!binded7810){ $(window).bind('beforeunload',function(){ binded7810 = true; return "xxxx"; }); } var newCode = doc.getValue(); code7810 = newCode; $("textarea#stepcodeTextarea7810").val(newCode); if(alreadyWriteCode7810!=code7810){ lastModifedTime7810 = new Date().getTime(); $("#rendering7810").show(); $("#rendered7810").hide(); } // alert(doc.getValue()); }); $(".CodeMirror").addClass("form-control"); // var editor7810 = CodeMirror.fromTextArea(, { // lineNumbers: true, // styleActiveLine: true, // matchBrackets: true, // theme:"eclipse", // }); editor7810.on("change",function(doc){ // alert(doc.getValue()); }); $("#tryDiv7810").hide(); }); $("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

步骤 2 :

再看看 computed 的做法

顶折

如果运算过程比较复杂，那么维护起来就比较麻烦。

所以可以把运算过程，都放在computed里去，只用显示运算结果就好了。

"); window.frames["iframe_show7811"].document.write(decodeHtml($("textarea#stepcodeTextarea7811").val())); window.frames["iframe_show7811"].document.close(); $(window.frames["iframe_show7811"]).load(function(){ $("#iframe_show7811").height($("#iframe_show7811").contents().find("body").height()+showittryitheight); }); $("#iframe_show7811").height($("#iframe_show7811").contents().find("body").height()+showittryitheight); setTimeout(function(){ },500); });

运行效果

代码行数较多，请点击查看

<script src="http://127.0.0.1/study/vue.min.js"></script>
    
<style>
table tr td{
    border:1px solid gray;
    padding:10px;
     
}
table{
    border-collapse:collapse;
    width:800px;
    table-layout:fixed;
}
tr.firstLine{
    background-color: lightGray;
}
</style>
  
<div id="div1">
    
    <table align="center" >
        <tr class="firstLine">
            <td>人民币</td>
            <td>美元</td>
        </tr>       
        <tr>
        	<td align="center" colspan="2">
        	汇率： <input type="number" v-model.number="exchange" />
        	</td>
        </tr>
        
        <tr>
        
        	<td align="center">
        		￥: <input type="number" v-model.number = "rmb"  />
        	</td>
        	<td align="center">
        		$: {{ dollar }}
        	</td>
        </tr>
    </table>
  
</div>
     
<script>
   
new Vue({
      el: '#div1',
      data: {
    	  exchange:6.4,
          rmb:0
      },
      computed:{
          dollar:function() {
              return this.rmb / this.exchange; 
          }
      }
    })
     
</script>

"); window.frames["iframe7811"].document.write(decodeHtml(code7811)); window.frames["iframe7811"].document.close(); //load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe7811"]).load(function(){ $("#iframe7811").height($("#iframe7811").contents().find("body").height()+showittryitheight); }); $("#iframe7811").height($("#iframe7811").contents().find("body").height()+showittryitheight); alreadyWriteCode7811 = code7811; $("#rendering7811").hide(); $("#rendered7811").show(); } var tRereshRetry2DemoPanel7811 = setInterval(rereshRetry2DemoPanel7811,1000); var binded7811 = false; $("textarea#stepcodeTextarea7811").keyup(function(){ if(!binded7811){ $(window).bind('beforeunload',function(){ binded7811 = true; return "xxxx"; }); } var newCode = $(this).val() code7811 = newCode; /*below code is replaced by function rereshRetry2DemoPanel()*/ // if(code7811!=newCode){ // window.frames["iframe7811"].document.write("

"); // window.frames["iframe7811"].document.write(decodeHtml($("textarea#stepcodeTextarea7811").val())); // window.frames["iframe7811"].document.close(); // $(window.frames["iframe7811"]).load(function(){ // $("#iframe7811").height($("#iframe7811").contents().find("body").height()+showittryitheight); // }); // code7811 = newCode; // } }); $(".tryButton7811").click(function(){ $("#tryDiv7811").show(); $("#stepcodeTextarea7811").focus(); $("#stepcodeTextarea7811").height(200); $("#iframe7811").height(0); window.frames["iframe7811"].document.write("

"); window.frames["iframe7811"].document.write(decodeHtml($("textarea#stepcodeTextarea7811").val())); window.frames["iframe7811"].document.close(); //load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe7811"]).load(function(){ $("#iframe7811").height($("#iframe7811").contents().find("body").height()+showittryitheight); }); $("#iframe7811").height($("#iframe7811").contents().find("body").height()+showittryitheight); this.scrollIntoView(true); editor7811.focus(); editor7811.setSize(null, "250"); $("#rendering7811").hide(); $("#rendered7811").hide(); }); var mixedMode = { name: "htmlmixed", scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i, mode: null}, {matches: /(text|application)\/(x-)?vb(a|script)/i, mode: "vbscript"}] }; var editor7811 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea7811"), { lineNumbers: true, styleActiveLine: true, matchBrackets: true, mode:"text/html", theme:"eclipse", selectionPointer: true, lineWrapping: true, extraKeys: { "Alt-/": "autocomplete", "Ctrl-F": "findPersistent", "F8": function(cm) { cm.setOption("fullScreen", !cm.getOption("fullScreen")); }, "Esc": function(cm) { if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false); } } }); editor7811.on("change",function(doc){ if(!binded7811){ $(window).bind('beforeunload',function(){ binded7811 = true; return "xxxx"; }); } var newCode = doc.getValue(); code7811 = newCode; $("textarea#stepcodeTextarea7811").val(newCode); if(alreadyWriteCode7811!=code7811){ lastModifedTime7811 = new Date().getTime(); $("#rendering7811").show(); $("#rendered7811").hide(); } // alert(doc.getValue()); }); $(".CodeMirror").addClass("form-control"); // var editor7811 = CodeMirror.fromTextArea(, { // lineNumbers: true, // styleActiveLine: true, // matchBrackets: true, // theme:"eclipse", // }); editor7811.on("change",function(doc){ // alert(doc.getValue()); }); $("#tryDiv7811").hide(); }); $("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

步骤 3 :

method 也能达到一样的效果

顶折

method 也能达到一样的效果，调用的时候，要加上括号

"); window.frames["iframe_show7812"].document.write(decodeHtml($("textarea#stepcodeTextarea7812").val())); window.frames["iframe_show7812"].document.close(); $(window.frames["iframe_show7812"]).load(function(){ $("#iframe_show7812").height($("#iframe_show7812").contents().find("body").height()+showittryitheight); }); $("#iframe_show7812").height($("#iframe_show7812").contents().find("body").height()+showittryitheight); setTimeout(function(){ },500); });

运行效果

代码行数较多，请点击查看

<script src="http://127.0.0.1/study/vue.min.js"></script>
    
<style>
table tr td{
    border:1px solid gray;
    padding:10px;
     
}
table{
    border-collapse:collapse;
    width:800px;
    table-layout:fixed;
}
tr.firstLine{
    background-color: lightGray;
}
</style>
  
<div id="div1">
    
    <table align="center" >
        <tr class="firstLine">
            <td>人民币</td>
            <td>美元</td>
        </tr>       
        <tr>
        	<td align="center" colspan="2">
        	汇率： <input type="number" v-model.number="exchange" />
        	</td>
        </tr>
        
        <tr>
        
        	<td align="center">
        		￥: <input type="number" v-model.number = "rmb"  />
        	</td>
        	<td align="center">
        		$: {{ getDollar() }}
        	</td>
        </tr>
    </table>
  
</div>
     
<script>
   
new Vue({
      el: '#div1',
      data: {
    	  exchange:6.4,
          rmb:0
      },
      methods:{
          getDollar:function() {
              return this.rmb / this.exchange; 
          }
      }
    })
     
</script>

"); window.frames["iframe7812"].document.write(decodeHtml(code7812)); window.frames["iframe7812"].document.close(); //load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe7812"]).load(function(){ $("#iframe7812").height($("#iframe7812").contents().find("body").height()+showittryitheight); }); $("#iframe7812").height($("#iframe7812").contents().find("body").height()+showittryitheight); alreadyWriteCode7812 = code7812; $("#rendering7812").hide(); $("#rendered7812").show(); } var tRereshRetry2DemoPanel7812 = setInterval(rereshRetry2DemoPanel7812,1000); var binded7812 = false; $("textarea#stepcodeTextarea7812").keyup(function(){ if(!binded7812){ $(window).bind('beforeunload',function(){ binded7812 = true; return "xxxx"; }); } var newCode = $(this).val() code7812 = newCode; /*below code is replaced by function rereshRetry2DemoPanel()*/ // if(code7812!=newCode){ // window.frames["iframe7812"].document.write("

"); // window.frames["iframe7812"].document.write(decodeHtml($("textarea#stepcodeTextarea7812").val())); // window.frames["iframe7812"].document.close(); // $(window.frames["iframe7812"]).load(function(){ // $("#iframe7812").height($("#iframe7812").contents().find("body").height()+showittryitheight); // }); // code7812 = newCode; // } }); $(".tryButton7812").click(function(){ $("#tryDiv7812").show(); $("#stepcodeTextarea7812").focus(); $("#stepcodeTextarea7812").height(200); $("#iframe7812").height(0); window.frames["iframe7812"].document.write("

"); window.frames["iframe7812"].document.write(decodeHtml($("textarea#stepcodeTextarea7812").val())); window.frames["iframe7812"].document.close(); //load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe7812"]).load(function(){ $("#iframe7812").height($("#iframe7812").contents().find("body").height()+showittryitheight); }); $("#iframe7812").height($("#iframe7812").contents().find("body").height()+showittryitheight); this.scrollIntoView(true); editor7812.focus(); editor7812.setSize(null, "250"); $("#rendering7812").hide(); $("#rendered7812").hide(); }); var mixedMode = { name: "htmlmixed", scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i, mode: null}, {matches: /(text|application)\/(x-)?vb(a|script)/i, mode: "vbscript"}] }; var editor7812 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea7812"), { lineNumbers: true, styleActiveLine: true, matchBrackets: true, mode:"text/html", theme:"eclipse", selectionPointer: true, lineWrapping: true, extraKeys: { "Alt-/": "autocomplete", "Ctrl-F": "findPersistent", "F8": function(cm) { cm.setOption("fullScreen", !cm.getOption("fullScreen")); }, "Esc": function(cm) { if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false); } } }); editor7812.on("change",function(doc){ if(!binded7812){ $(window).bind('beforeunload',function(){ binded7812 = true; return "xxxx"; }); } var newCode = doc.getValue(); code7812 = newCode; $("textarea#stepcodeTextarea7812").val(newCode); if(alreadyWriteCode7812!=code7812){ lastModifedTime7812 = new Date().getTime(); $("#rendering7812").show(); $("#rendered7812").hide(); } // alert(doc.getValue()); }); $(".CodeMirror").addClass("form-control"); // var editor7812 = CodeMirror.fromTextArea(, { // lineNumbers: true, // styleActiveLine: true, // matchBrackets: true, // theme:"eclipse", // }); editor7812.on("change",function(doc){ // alert(doc.getValue()); }); $("#tryDiv7812").hide(); }); $("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

步骤 4 :

computed 和 methods 的区别

顶折

computed 是有缓存的，只要rmb没有变化，dollar 会直接返回以前计算出来的值，而不会再次计算。这样如果是复杂计算，就会节约不少时间。
而methods每次都会调用

双向绑定

监听属性

HOW2J公众号，关注后实时获知布最新的教程和优惠活动，谢谢。

关于前端部分-Vue.js-计算属性的提问

尽量提供截图、代码和异常信息，有助于分析和解决问题。也可进本站QQ群交流: 620943819

提问尽量提供完整的代码，环境描述，越是有利于问题的重现，您的问题越能更快得到解答。
对教程中代码有疑问，请提供是哪个步骤，哪一行有疑问，这样便于快速定位问题，提高问题得到解答的速度
在已经存在的几千个提问里，有相当大的比例，是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本，可以节约自己大量的学习时间。站长把教学中用的软件版本整理了，都统一放在了这里，方便大家下载： http://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图