Commit a91110fa authored by Spectre's avatar Spectre 💬

Update

parent f36ba8c8
var app = new Vue({ //object
el: '#app', //element #app
//Script Lainnya diletakkan disini
data: {
kendaraan:['mobil','motor','becak','sepeda']
}
});
\ 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">
<ul>
<li>{{ kendaraan[0] }}</li>
<li>{{ kendaraan[1] }}</li>
</ul>
</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
This diff is collapsed.
var app = new Vue({ //object
el: '#app', //element #app
//Script Lainnya diletakkan disini
data: {
kendaraan:['mobil','motor','becak','sepeda']
}
});
\ 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">
<ul>
<li v-for="a in kendaraan"> {{a}} </li>
</ul>
</div>7 7
<!-- 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
This diff is collapsed.
var app = new Vue({ //object
el: '#app', //element #app
//Script Lainnya diletakkan disini
data: {
isi:'',
kendaraan:['mobil','motor','becak','sepeda']
},
methods:{
tambah: function () {
this.kendaraan.push(this.isi)
this.isi=''
}
}
});
\ 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">
<button @click="tambah">Tambah Data</button>
<ul>
<li v-for="a in kendaraan">{{a}}</li>
</ul>
</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
This diff is collapsed.
var app = new Vue({ //object
el: '#app', //element #app
//Script Lainnya diletakkan disini
data: {
isi:'',
kendaraan:['mobil','motor','becak','sepeda']
},
methods:{
tambah: function () {
this.kendaraan.push(this.isi)
this.isi=''
},
hapus(index){
this.kendaraan.splice(index,1)
}
}
});
\ 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">
<button @click="tambah">Tambah Data</button>
<ul>
<li v-for="(a, index) in kendaraan">
<button @click='hapus(index)'>x</button>
{{a}}
</li>
</ul>
</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
This diff is collapsed.
var app = new Vue({ //object
el: '#app', //element #app
//Script Lainnya diletakkan disini
data: {
isi:'',
kendaraan:[
{ jenis: 'mobil', merk: 'honda', warna: 'putih'},
{ jenis: 'sepeda motor', merk: 'yamaha', warna: 'hitam'},
{ jenis: 'truck', merk: 'hino', warna: 'hijau'}
]
},
methods:{
hapus(index){
this.kendaraan.splice(index,1)
}
}
});
\ 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">
<ul v-for="(a, index) in kendaraan">
<li>
<button @click='hapus(index)'>x</button>
jenisnya: {{a.jenis}},
merknya: {{a.merk}},
warnanya: {{a.warna}}
</li>
</ul>
</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
This diff is collapsed.
var app = new Vue({ //object
el: '#app', //element #app
//Script Lainnya diletakkan disini
data: {
isi:'',
barang:[
{ jenis: 'mie rebus', merk: 'mie sedap', stock: true },
{ jenis: 'mie goreng', merk: 'mie sedap', stock: true},
{ jenis: 'minuman kaleng', merk: 'milo', stock: false},
{ jenis: 'minyak goreng', merk: 'bimoli', stock: false},
{ jenis: 'makanan ringan', merk: 'tela', stock: true},
{ jenis: 'ice cream', merk: 'walls', stock: true}
]
},
computed:{
barangada(){
return this.barang.filter (b => b.stock)
},
baranghabis(){
return this.barang.filter (b => !b.stock)
},
}
});
\ 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">
<h2>Seluruh Barang</h2>
<ul>
<li v-for="b in barang" v-text="b.jenis"></li>
</ul>
<h2>Seluruh Barang Tersedia</h2>
<ul>
<li v-for="b in barangada" v-text="b.jenis"></li>
</ul>
<h2>Seluruh Barang Habis</h2>
<ul>
<li v-for="b in baranghabis" v-text="b.jenis"></li>
</ul>
</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:'',
}
});
\ 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">
<b v-for="x in 10" v-if="x !=2"> {{x}}</b>
</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
This diff is collapsed.
var app = new Vue({ //object
el: '#app', //element #app
//Script Lainnya diletakkan disini
data: {
cari: '',
barang: [
{ jenis: 'mie rebus', merk: 'mie sedap', stock: true },
{ jenis: 'mie goreng', merk: 'mie sedap', stock: true },
{ jenis: 'minuman kaleng', merk: 'milo', stock: false },
{ jenis: 'minyak goreng', merk: 'bimoli', stock: false },
{ jenis: 'makanan ringan', merk: 'tela', stock: true },
{ jenis: 'ice cream', merk: 'walls', stock: true }
]
},
computed: {
filterbarang: function () {
return this.barang.filter ((a)=>{
return a.merk.match(this.cari)
});
}
}
});
\ 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="cari" placeholder="cari berdasarkan merk">
<ul v-for="a in filterbarang">
<li>
jenisnya : {{ a.jenis }},
merknya : {{ a.merk }},
warnanya : {{ a.stock }}
</li>
</ul>
</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
This diff is collapsed.
var app = new Vue({ //object
el: '#app', //element #app
//Script Lainnya diletakkan disini
data: {
pesan:'belajar VueJS'
},
filters:{
kapital(value){
if (!value) return''
value = value.toString()
return value.toUpperCase()
},
kecil(value){
if (!value) return ''
value = value.toString()
return value.toLowerCase()
},
besarawal: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
});
\ 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">
Normal :
<b>{{pesan}}</b><br>
Huruf Kapital Semua :
<b>{{pesan | kapital}}</b><br>
Huruf Kecil Semua :
<b>{{pesan | kecil}}</b><br>
Huruf Kapital Awal :
<b>{{pesan | besarawal}}</b>
</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
This diff is collapsed.
var app = new Vue({ //object
el: '#app', //element #app
//Script Lainnya diletakkan disini
data: {
pesan:'belajar VueJS'
},
filters:{
kapital(value){
if (!value) return''
value = value.toString()
return value.toUpperCase()
},
kecil(value){
if (!value) return ''
value = value.toString()
return value.toLowerCase()
},
besarawal: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
});
\ 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">
Normal :
<b>{{pesan}}</b><br>
Huruf Kapital Semua :
<b>{{pesan | kapital}}</b><br>
Huruf Kecil Semua :
<b>{{pesan | kecil}}</b><br>
Huruf Kapital Awal :
<b>{{pesan | besarawal}}</b>
</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
This diff is collapsed.
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