JSFiddle - React, Tailwind, and code Playground
by ysuper
HTML
---------------------------------------------------------------------------------------------<br>
<font size=5 style="background-color:yellow">app0</font>
<div id="app0">
{{ counter }} 商品數量
<input v-model="counter">
</div>
---------------------------------------------------------------------------------------------<br>
<font size=5 style="background-color:yellow">app1</font>
<div id="app1">
{{ message }}
</div>
---------------------------------------------------------------------------------------------<br>
<font size=5 style="background-color:yellow">app2</font>
<div id="app2">
<h1>{{ message }}</h1>
<input type="text" v-model="message">
<div>{{ $data | json }}</div>
</div>
---------------------------------------------------------------------------------------------<br>
<font size=5 style="background-color:yellow">app3</font>
<div id="app3">
<h1 class="error">{{ score }}分</h1>
<div v-show="score">
<p v-if="score >= 6">Vue.js so easy</p>
<p v-else-if="score < 0">沒有負分啦</p>
<p v-else>still learning Vue.js</p>
</div>
<p>你覺得vue.js簡單嗎？請輸入1~10分</p>
<input type="text" v-model="score">
</div>
---------------------------------------------------------------------------------------------<br>
<font size=5 style="background-color:yellow">app4</font>
<div id="app4">
<p>目前已點擊：{{count}}次</p>
<input type="submit" value="立即送出" v-on:click="clickme">
</div>
---------------------------------------------------------------------------------------------<br>
<font size=5 style="background-color:yellow">app5</font>
<div id="app5">
<button v-on:click="handleIt('地瓜')">你說 地瓜</button>
<button v-on:click="handleIt('耶')">我說 葉</button>
</div>
---------------------------------------------------------------------------------------------<br>
<font size=5 style="background-color:yellow">app6</font>
<div id="app6">
<form action="404.html" v-on:submit="handleIt">
<button type="submit">立即送出</button>
</form>
<form action="404.html"...CSS
/* app11 */
.color{
color:green;
}
.size{
font-size: 50px;
}JavaScript
new Vue({
el: '#app0',
data: {
counter: '0'
}
});
////////////////////////////////////////////////////////////////////////////////////////////////
new Vue({
el: '#app1',
data: {
message: 'Hello World!'
}
});
////////////////////////////////////////////////////////////////////////////////////////////////
var data = {
message: 'Hello Ysuper!'
}
new Vue({
el: '#app2',
data: data
});
////////////////////////////////////////////////////////////////////////////////////////////////
new Vue({
el: '#app3',
data: {
score: '0'
}
});
////////////////////////////////////////////////////////////////////////////////////////////////
new Vue({
el:'#app4',
data:{
count:0
},
methods:{
clickme: function(){
this.count += 1;
}
}
});
////////////////////////////////////////////////////////////////////////////////////////////////
new Vue({
el:'#app5',
methods:{
handleIt: function(msg){
alert(msg)
}
}
});
////////////////////////////////////////////////////////////////////////////////////////////////
new Vue({
el:'#app6',
methods:{
handleIt: function(){
alert("here I am!");
}
}
});
////////////////////////////////////////////////////////////////////////////////////////////////
new Vue({
el:'#app7'
});
////////////////////////////////////////////////////////////////////////////////////////////////
new Vue({
el:'#app8',
data:{
items: [
{ message: 'Apple' },
{ message: 'banana' },
{ message: 'Coconut' }
]
}
});
////////////////////////////////////////////////////////////////////////////////////////////////
new Vue({
el:'#app9',
data: {
parentMessage: '台北市',
items: [
{ message: '中正區' },
{ message: '中山區' },
{ message: '大同區' }
]
}
});
////////////////////////////////////////////////////////////////////////////////////////////////
new Vue({
el:'#app10',
data:{
myStyle: {
color: 'red',
fontSize:...