[Vue.js] 속성을 계산하는 네 가지 연산의 견본
10977 단어 Vue.js
입문
속성 계산 -
var app= new Vue({
el: '#app',
data: {
message: 'Hello'
},
})
var app = new Vue({
el: '#app',
data: {
input1_1:0,
input1_2:0,
},
computed:{
add1: function() {return this.input1_1 + this.input1_2},
},
})
사칙 연산 예
낙점
<!-- うまくいかない例(文字列結合となってしまった) -->
<input type="number" v-model="input1_1">
사이트 제목에도 다음과 같은 v-model이 기재되어 있다.number로 정의해야 합니다.
<!-- うまくいった例 -->
<input type="number" v-model.number="input1_1">
견본
<html lang='ja'>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div id="app">
<div class="col-sm12">
<label>足し算:</label><input type="number" v-model.number="input1_1"> + <input type="number" v-model.number="input1_2"> = <span>{{ add1 }}</span>
</div>
<div class="col-sm12">
<label>引き算:</label><input type="number" v-model.number="input2_1"> - <input type="number" v-model.number="input2_2"> = <span>{{ min1 }}</span>
</div>
<div class="col-sm12">
<label>掛け算:</label><input type="number" v-model.number="input3_1"> × <input type="number" v-model.number="input3_2"> = <span>{{ multi1 }}</span>
</div>
<div class="col-sm12">
<label>割り算:</label><input type="number" v-model.number="input4_1"> × <input type="number" v-model.number="input4_2"> = <span>{{ divis1 }}</span>
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
input1_1:0,
input1_2:0,
input2_1:0,
input2_2:0,
input3_1:0,
input3_2:0,
input4_1:0,
input4_2:0,
},
computed:{
add1: function() {return this.input1_1 + this.input1_2},
min1: function() {return this.input2_1 - this.input2_2},
multi1: function() {return this.input3_1 * this.input3_2},
divis1: function() {return this.input4_1 / this.input4_2},
},
})
</script>
</body>
</html>
결과 내보내기
Reference
이 문제에 관하여([Vue.js] 속성을 계산하는 네 가지 연산의 견본), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/yut-nagase/items/e8a03cd27bbce07bb4fa텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
