这两种方式有什么区别，为什么一个有结果一个没有？

var vf = document.getElementById("fruit").value;

//...一系列计算后

vf=sum;

上面的方式没有结果，而下面的方式有结果

//...一系列计算后

document.getElementById("fruit").value=sum;

请教一下这是为什么？

补充：具体代码是这样的

（1）这是正确的，能返回想要的结果（第三个框框有结果输出）

function count(){
    //获取第一个输入框的值
    var v1 = document.getElementById("txt1").value;
    v1=parseInt(v1);
	//获取第二个输入框的值
	var v2 = document.getElementById("txt2").value;
	v2=parseInt(v2);
	//获取选择框的值
	
	//获取通过下拉框来选择的值来改变加减乘除的运算法则
	var vr = document.getElementById("select").value;
    //设置结果输入框的值 
    var sum;
    switch(vr){
        case "+":
            sum=v1+v2;
            break;
        case "-":
            sum=v1-v2;
            break;
        case "*":
            sum=v1*v2;
            break;
        case "/":
            sum=v1/v2;
            break;
        default:
    }
    document.getElementById("fruit").value=sum;
   }

（2）这是错误的，返回不了想要的结果（第三个框框没有结果输出）

function count(){
    //获取第一个输入框的值
    var v1 = document.getElementById("txt1").value;
    v1=parseInt(v1);
	//获取第二个输入框的值
	var v2 = document.getElementById("txt2").value;
	v2=parseInt(v2);
	//获取选择框的值
	var vf = document.getElementById("fruit").value;
	//获取通过下拉框来选择的值来改变加减乘除的运算法则
	var vr = document.getElementById("select").value;
    //设置结果输入框的值 
    var sum;
    switch(vr){
        case "+":
            sum=v1+v2;
            break;
        case "-":
            sum=v1-v2;
            break;
        case "*":
            sum=v1*v2;
            break;
        case "/":
            sum=v1/v2;
            break;
        default:
    }
    vf=sum;
   }