Verwenden Sie vue, um einen einfachen verbindlichen Fall für Computervereinbarungsschaltflächen zu implementieren
Die Verwendung des vue-Befehls
v-modelv-onv-bindzum Erzielen der folgenden Funktionen
v-onkann abgekürzt werden @Ereignisname = "Methodenname in Methoden"
v-bindkann abgekürzt werden: das Attribut, das mit dem Tag geliefert wird
v-model:einführen
v-modelBidirektionale Datenbindung
Ändern Sie den Inhalt der Daten in der Vue-Instanz, und der Inhalt der Seite ändert sich entsprechend.
Ändern Sie die Daten auf der Seite, und die Daten in der Vue-Instanz ändern sich
entsprechend Instanz und der Inhalt
und der Inhalt der Instanz
inputist, dassvalueder Wert
v-bindnur invueder Instanz Die Seite wird nur aktualisiert, wenn die Daten geändert werden
, aber nachdem der Antwortinhalt der Seite aktualisiert wurde, werden die Daten der vue-Instanz nicht aktualisiert entsprechend aktualisiert werden.
v-bind:
v-bindDatenbindung
//Am häufigsten verwendet wird das Label-Attribut;
//Verwendung
//<label v-bind: attribute name = "der in Daten gebundene Attributwert"></label>
//Bequeme Schreibweise spart v-bind :
// <label: attribute name = "in Daten gebundener Attributwert"></label>
v-on:
Anweisungen
v-onwerden speziell verwendet, um Ereignisse in Methoden zu binden;
Schreibweise:
<label v-on: Ereignisname="Ereignisname in Methoden ()"></label>
Prägnante Schreibweise:
empfohlen
<label@Ereignisname="Methoden Der Ereignisname im Inneren ()"></label>
Hinweis:
Der Ereignisname in Methoden darf nicht mit dem Datennamen in Daten übereinstimmen;
standardmäßig werden die Daten in Daten verwendet
Zum Beispiel:
<button @click="total()">=</button>
<button :disabled="!checked">下一步</button>
Wiedergaben
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<div class="one">
<h1>1.同意条款按钮</h1>
<span>{
{checked}}</span>
<input type="checkbox" v-model="checked">同意相关条款
<button :disabled="!checked">下一步</button>
</div>
<div class="two">
<h1>2.简易计算机</h1>
<input type="text" style="width:50px" v-model="num1">
<select v-model="type">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" style="width:50px" v-model="num2">
<button @click="total()">=</button> {
{result}}
</div>
<div class="three">
<h1>3.表单绑定</h1>
<h3>我的性别:{
{gin}}</h3>
<!-- v-model监听value的值 -->
<input type="radio" v-model="gin" value="man">男<br>
<input type="radio" v-model="gin" value="woman">女<br>
<input type="radio" v-model="gin" value="secret">保密<br>
<h3>我的学历：{
{edu}}</h3>
<select v-model="edu">
<option value="胎教">胎教</option>
<option value="本科">本科</option>
<option value="幼儿园">幼儿园</option>
</select>
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data() {
return {
checked:true,
num1:1, //计算机第1个input值
num2:1, //计算机第2个input值
type:"+", //select +-*/的值
result:2, //计算结果
gin:"man", //表单绑定 监听的value值 默认man
edu:"幼儿园" //与select 一个意义
}
},
methods: {
total(){
//第一种方法
//let valA = Number(this.val1);
// let valB = Number(this.val2);
// if(this.type=="+"){
// this.result=(valA + valB).toFixed(2);
// }else if(this.type=="-"){
// this.result=(valA - valB).toFixed(2);
// }
// else if(this.type=="*"){
// this.result=(valA * valB).toFixed(2);
// }else if(this.type=="/"){
// this.result=(valA / valB).toFixed(2);
// }
//第二种 eval强大且危险
this.result=eval (this.num1+this.type+this.num2)
}
},
})
</script>
</body>
</html>