vue - vue表单中v-model和:value的区别

记录一下在项目中发现vue表单元素中v-model和:value使用中的一个区别；
首先v-model和:value功能是一样的都能实现数据的双向绑定；但是在页面的渲染过程中会有一些区别

区别：

• v-model在渲染的时候不能写表达式；
• :value在渲染时可以写成表达式的形式，便于对数据展示的二次转换；

下面来看一下这个简单的案例：

使用:valueage可以写成一个表达式或直接在后面拼接（:value="age +'岁' " ）；使用v-model只能写成一个固定的值，否则会报：'v-model' directives require the attribute value which is valid as LHS，意思是左边需要一个有效的属性值；

  
 <div class="valueModel">
      v-model使用:<input type="text" class="age"  v-model="age" /> <br />
      :value使用 :<input type="text" class="age"  :value="age <10 ? funAge(age) : age" />
  </div>
  <script>
  	data(){
    
    
  		return {
    
    
  			 age: 10,
  		}
  	},
  	methods(){
    
    
  	 funAge(age){
    
    
      console.log(age);  
      return `0${
      
      age}岁`
    },
  	}
  </script>
  

效果图：