Commit cea1eef2 authored by Spectre's avatar Spectre 💬

Update

parent 0c1f16e5
var app = new Vue({ //object
el: '#app', //element #app
//Script Lainnya diletakkan disini
data: {
bil1:1,
bil2:2
},
computed:{
jumlah: function () {
return this.bil1+this.bil2
}
}
});
\ No newline at end of file
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Belajar Vue JS</title>
</head>
<body>
<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- production version, optimized for size and speed -->
<!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
<div id="app">
hasil dari {{bil1}} + {{bil2}} adalah {{jumlah}}
</div>
<!-- Jika Menggunakan library Javascript vue.js yang terdapat di local-->
<!--<script src="vue.min.js"></script>-->
<!--Memanggil javascript apps-->
<script src="apps.js"></script>
</body>
</html>
\ No newline at end of file
var app = new Vue({ //object
el: '#app', //element #app
//Script Lainnya diletakkan disini
data: {
bil1:1,
bil2:2,
jumlah:null
},
methods: {
diproses() {
return this.jumlah = this.bil1 + this.bil2
}
}
});
\ No newline at end of file
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Belajar Vue JS</title>
</head>
<body>
<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- production version, optimized for size and speed -->
<!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
<div id="app">
hasil dari {{bil1}} + {{bil2}} adalah {{jumlah}}
<br>
<button v-on:click='diproses'>proses</button>
</div>
<!-- Jika Menggunakan library Javascript vue.js yang terdapat di local-->
<!--<script src="vue.min.js"></script>-->
<!--Memanggil javascript apps-->
<script src="apps.js"></script>
</body>
</html>
\ No newline at end of file
var app = new Vue({ //object
el: '#app', //element #app
//Script Lainnya diletakkan disini
data: {
a:6,
b:3,
},
computed: {
jumlah: function() {
return this.a + this.b
},
kurang: function () {
return this.a - this.b
},
kali: function () {
return this.a * this.b
},
bagi: function () {
return this.a / this.b
}
}
});
var app1 = new Vue({ //object
el: '#app1', //element #app
//Script Lainnya diletakkan disini
data: {
a: 6,
b: 3,
jumlah:0,
kurang:0,
kali:0,
bagi:0
},
methods: {
diproses() {
this.jumlah = this.a+this.b
this.kurang = this.a - this.b
this.kali = this.a * this.b
this.bagi = this.a / this.b
}
}
});
\ No newline at end of file
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Belajar Vue JS</title>
</head>
<body>
<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- production version, optimized for size and speed -->
<!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
<div id="app">
<h3>Hasil dari perhitungan {{a}} dan {{b}} menggunakan computed :</h3>
penjumlahan : {{jumlah}}<br>
pengurangan : {{kurang}}<br>
perkalian : {{kali}}<br>
pembagian : {{bagi}}<br>
</div>
<div id="app1">
<h3>Hasil dari perhitungan {{a}} dan {{b}} menggunakan methods :</h3>
<button v-on:click='diproses'>proses</button><br>
penjumlahan : {{jumlah}}<br>
pengurangan : {{kurang}}<br>
perkalian : {{kali}}<br>
pembagian : {{bagi}}<br>
</div>
<!-- Jika Menggunakan library Javascript vue.js yang terdapat di local-->
<!--<script src="vue.min.js"></script>-->
<!--Memanggil javascript apps-->
<script src="apps.js"></script>
</body>
</html>
\ No newline at end of file
var app = new Vue({ //object
el: '#app', //element #app
//Script Lainnya diletakkan disini
data: {
isi : '',
keterangan:''
},
watch:{
isi:function () {
this.keterangan='sedang mengetik ....'
}
}
});
\ No newline at end of file
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Belajar Vue JS</title>
</head>
<body>
<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- production version, optimized for size and speed -->
<!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
<div id="app">
<input type="text" v-model="isi">{{keterangan}}
</div>
<!-- Jika Menggunakan library Javascript vue.js yang terdapat di local-->
<!--<script src="vue.min.js"></script>-->
<!--Memanggil javascript apps-->
<script src="apps.js"></script>
</body>
</html>
\ No newline at end of file
var app = new Vue({ //object
el: '#app', //element #app
//Script Lainnya diletakkan disini
data: {
isi : '',
keterangan:''
},
watch:{
isi:'ketik'
},
methods:{
ketik:function () {
if(this.isi=='cinta'){
this.keterangan='sayang'
}
else{
this.keterangan='sedang mengetik.....'
}
}
}
});
\ No newline at end of file
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Belajar Vue JS</title>
</head>
<body>
<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- production version, optimized for size and speed -->
<!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
<div id="app">
<input type="text" v-model="isi">{{keterangan}}
</div>
<!-- Jika Menggunakan library Javascript vue.js yang terdapat di local-->
<!--<script src="vue.min.js"></script>-->
<!--Memanggil javascript apps-->
<script src="apps.js"></script>
</body>
</html>
\ No newline at end of file
var app = new Vue({ //object
el: '#app', //element #app
//Script Lainnya diletakkan disini
data: {
isi1 : '',
isi2: '',
keterangan: '',
tampil:false
},
watch:{
isi2:'ketik'
},
methods:{
ketik:function () {
if(this.isi2 == this.isi1){
this.keterangan='<i>password sama, silahkan lanjutkan</i>';
this.tampil=true;
}
else{
this.keterangan = '<i>password tidak sama</i>';
this.tampil=false;
}
}
}
});
\ No newline at end of file
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Belajar Vue JS</title>
</head>
<body>
<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- production version, optimized for size and speed -->
<!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
<div id="app">
<input type="password" v-model="isi1" placeholder="masukan password">
<input type="password" v-model="isi2" placeholder="ulangi password">
<p v-html="keterangan"></p>
<input type="submit" value="Daftar" v-if="tampil">
</div>
<!-- Jika Menggunakan library Javascript vue.js yang terdapat di local-->
<!--<script src="vue.min.js"></script>-->
<!--Memanggil javascript apps-->
<script src="apps.js"></script>
</body>
</html>
\ No newline at end of file
var app = new Vue({ //object
el: '#app', //element #app
//Script Lainnya diletakkan disini
data: {
isi1 : '',
isi2: '',
keterangan: '',
tampil:false
},
watch:{
isi2:'ketik'
},
methods:{
ketik:function () {
if(this.isi2 == this.isi1){
this.keterangan='<i>password sama, silahkan lanjutkan</i>';
this.tampil=true;
}
else{
this.keterangan = '<i>password tidak sama</i>';
this.tampil=false;
}
}
}
});
\ No newline at end of file
<!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">
<title>Bootstrap Vue Login Form</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
.login-form {
width: 340px;
margin: 50px auto;
}
.login-form form {
margin-bottom: 15px;
background: #f7f7f7;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
padding: 30px;
}
.login-form h2 {
margin: 0 0 15px;
}
.form-control,
.btn {
min-height: 38px;
border-radius: 2px;
}
.btn {
font-size: 15px;
font-weight: bold;
}
</style>
</head>
<body>
<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- production version, optimized for size and speed -->
<!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
<div id="app" class="login-form">
<form action="#" method="post">
<h2 class="text-center">Form Bootstrap Vue</h2>
<div class="form-group">
<input type="text" class="form-control" placeholder="Masukan Username" required="required">
</div>
<div class="form-group">
<input type="password" v-model="isi1" class="form-control" placeholder="Masukan Password" required="required">
</div>
<div class="form-group">
<input type="ulangi password" v-model="isi2" class="form-control" placeholder="Ulangi Password" required="required">
</div>
<p v-html="keterangan"></p>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block" v-if="tampil">Login Form</button>
</div>
</form>
</div>
<!-- Jika Menggunakan library Javascript vue.js yang terdapat di local-->
<!--<script src="vue.min.js"></script>-->
<!--Memanggil javascript apps-->
<script src="apps.js"></script>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment