大家好我需要一些帮助来设置像素宽高比我有一个带有宽度和高度的vue应用程序我想要一个禁用的文本字段弹出宽高比并显示它像16：9等依赖在纵横比是输入的宽度和高度。我有这个，但不知道该怎么做。
<?php ob_start();
session_start();
include('head.php');
include('header.php');
?>
<div id="signUpFormContainer">
<div id="signUpForm">
<h2>Add A Display</h2>
<!--Display Name -->
<div class="inputDiv">
<p v-show="validName==true && nameexists==false">Display Name* <i class="fa fa-check-circle success"></i> Valid</p>
<p v-show="validName==false && sub=='1' && nameexists==false">Display Name* <i class="fa fa-exclamation-circle tooltip error"><span class="tooltiptext">Please enter a display name</span></i></p>
<p v-show='validName==false && sub!="1" && nameexists==false'>Display Name* <i class="fa fa-question-circle tooltip" style="color:darkblue;"><span class="tooltiptext blue" style="background-color:darkblue;">Please enter a display name</span></i></p>
<p v-show='sub=="1" && nameexists==true'>Display Name* <i class="fa fa-exclamation-circle tooltip error"><span class="tooltiptext">Display Name Already Exists</span></i></p>
<p v-show='sub=="1" && nameexists==true'>Display Name Already Exists</p>
<input v-model="name" placeholder="Display Name" v-on:focus="shownamerequirements">
<ul v-show='disnamer==true'>
<li v-show="validName==false">Please enter a display name</li>
</ul>
</div>
<!--END DISPLAY NAME -->
<!--Width-->
<div class="inputDiv">
<p v-show="widthLength==true && widthHasNum==true && width!=''">Pixel Width* <i class="fa fa-check-circle success"></i> Valid</p>
<p v-show="widthLength==false && width!='' || widthHasNum==false && width!='' || width=='' && sub==1">Pixel Width* <i class="fa fa-exclamation-circle tooltip error"><span class="tooltiptext">Please enter a width. Width can contain only numbers</span></i></p>
<p v-show="width=='' && sub==0">Pixel Width* <i class="fa fa-question-circle tooltip" style="color:darkblue;"><span class="tooltiptext blue" style="background-color:darkblue;">Width can contain only numbers</span></i></p>
<input v-model="width" placeholder="Pixel Width" v-on:focus="showwidthrequirements" id="width">
<ul v-show="diswidthr==true">
<li v-show="widthLength==false">Please enter pixel width of your display</li>
<li v-show="widthHasNum==false || width==''"> Width must contain only numbers</li>
<li v-show="widthLength==false">Note: Pixel width is typically an even number</li>
</ul>
</div>
<!-- End Width -->
<!-- Height -->
<div class="inputDiv">
<p v-show="heightLength==true && heightHasNum==true && height!=''">Pixel Height* <i class="fa fa-check-circle success"></i> Valid</p>
<p v-show="heightLength==false && height!='' || heightHasNum==false && height!='' || height=='' && sub==1">Pixel Height* <i class="fa fa-exclamation-circle tooltip error"><span class="tooltiptext">Please enter a height. Height can contain only numbers</span></i></p>
<p v-show="height=='' && sub==0">Pixel Height* <i class="fa fa-question-circle tooltip" style="color:darkblue;"><span class="tooltiptext blue" style="background-color:darkblue;">Height can contain only numbers</span></i></p>
<input v-model="height" placeholder="Pixel Height" v-on:focus="showheightrequirements" id="height">
<ul v-show="disheightr==true">
<li v-show="heightLength==false">Please enter the pixel height of your display</li>
<li v-show="heightHasNum==false || height==''"> Height must contain only numbers</li>
<li v-show="heightLength==false">Note: Pixel height is typically an even number</li>
</ul>
</div>
<!-- End Height -->
<!--Aspect Ratio -->
<p v-show="sub==1 && aspectratio!=''">{{aspectratio}}</p>
<!--End Aspect Ratio -->
<!-- File Format -->
<div class="inputDiv">
<p v-show="fileformat!=''">File Format* <i class="fa fa-check-circle success"></i> Valid</p>
<p v-show="fileformat=='' && sub==1">File Format* <i class="fa fa-exclamation-circle tooltip error"><span class="tooltiptext">Please select your default file format</span></i></p>
<p v-show="fileformat=='' && sub!=1">File Format* <i class="fa fa-question-circle tooltip" style="color:darkblue;"><span class="tooltiptext blue" style="background-color:darkblue;">Please select your default file format</span></i></p>
<select v-model="fileformat" id="fileformat">
<option disabled value="">Please select a default file format</option>
<option value="wmv">WMV</option>
<option value="mp4">MP4</option>
<option value="jpg">JPG</option>
</select>
</div>
<!-- End File Format-->
<div class="inputButton">
<input v-on:click="addDisplay" id="addButton" type="button" value="Add Display"></input>
</div>
</div>
<div id="footerContainer"></div>
</div>
<script>
var app = new Vue({
el: '#signUpForm',
data: {
name: '',
width: '',
height: '',
sub: '',
disnamer: '',
diswidthr: '',
disheightr: '',
nameexists:'',
aspectratio:'',
fileformat:''
},
computed: {
widthLength: function() {
this.width=this.width.replace(/\s/g, '');
if(this.width.trim().length >= 1) {
return true;
} else {
return false;
}
},
heightLength: function() {
this.height=this.height.replace(/\s/g, '');
if(this.height.trim().length >= 1) {
return true;
} else {
return false;
}
},
widthHasNum: function(){
this.width=this.width.replace(/[^0-9]+/g, '');
if(/[\d]/.test(this.width)){return true;} else{return false;}
},
heightHasNum: function(){
this.height=this.height.replace(/[^0-9]+/g, '');
if(/[\d]/.test(this.height)){return true;} else{return false;}
},
validName: function(){
this.name=this.name.replace(/\s/g, '');
if(this.name.trim().length >= 1) {
return true;
} else {
return false;
}
}
},
created: function() {
this.nameexists=false;
},
watch: {
},
methods: {
addDisplay: function() {
this.sub=1;
if(this.width!='' && this.height!=''){
this.aspectratio=this.width/this.height;}
if(this.widthLength && this.widthHasNum && this.heightLength && this.heightHasNum && this.validName && this.fileformat!='') {
var jsonString = JSON.stringify({
name: this.name,
width: this.width,
height: this.height,
fileformat: this.fileformat
});
$.ajax({
url: 'addDisplayBackend.php',
dataType: 'json',
type: 'post',
contentType: 'application/json',
dataType: 'json',
data: jsonString,
error: function(data){
alert('error');
// window.location.href='successfullycreated.php';
},
success: function(data){
console.log(data);
alert('success');
this.userexist=data.userexist;
if(this.nameexist==false){window.location.href='addeddisplay.php';}
}.bind(this)
});
}
},
shownamerequirements: function(){
this.sub=0;
this.disnamer=true;
this.diswidthr=false;
this.disheightr=false;
},
showheightrequirements: function(){
this.sub=0;
this.diswidthr=false;
this.disheightr=true;
this.disnamer=false;
},
showwidthrequirements: function(){
this.sub=0;
this.diswidthr=true;
this.disheightr=false;
this.disnamer=false;
}
}
});
</script>
<?php include('foot.php');?>