Vue(3)-关于文本框数据框默认值效果（v-bind），数据类型注意

序

直接看代码，v-bind的使用，数据类型的转换

示例代码

点击查看代码 


    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>avgScore</title>
    		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    	</head>
    <body>
    	<div id="app">
    		score1:<input type="text" v-model.number="score1" />
    		<br />
    		score2:<input type="text" v-model.number="score2" />
    		<br />
    		score3:<input type="text" v-model.number="score3" />
    		<br />
    		score4:<input type="text" v-model.number="score4" />
    		<br />
    		score5:<input type="text" v-model.number="score5" />
    		<br />
    		总分:{{sumScore}}
    		<br />
    		平均分数:{{avgScore}}
    		<br/>
    		<input :value="defaultv" />
    	</div>
    	
    	
    </body>

    <script>

    	var vm = new Vue({
    		el:"#app",
    		
    		data:{
    			ObjectNum:5,
    			score1:"",
    			score2:"",
    			score3:"",
    			score4:"",
    			score5:"",
    			defaultv:'默认'
    		},
    		methods:{

    		},
    		computed:{
    			avgScore:function(){
    				// 准确到小数点后两位
    				return Math.round(this.sumScore/this.ObjectNum).toFixed(2)
    			},
    			sumScore:function(){
    				return this.score1+this.score2+this.score3+this.score4+this.score5				
    			}
    			
    		},
    		
    		

    	})
    	

    </script>

    </html>

界面效果

知识点

  1. v-bind属性绑定 在本次代码中的 ：value可以看出他可以直接缩写为 ：属性
  2. v-model.number 数据类型定义为数字，弱类型真不好用
posted @ 2022-09-07 22:38  冥天肝  阅读(594)  评论(0)  编辑  收藏  举报