Skip to content

Instantly share code, notes, and snippets.

View index.js
var myName = '驚不驚喜';
function callName() {
 console.log(this,this.myName);
}
var family = {
 myName: '來因',
 callName: callName,
 ana: {
 myName: '安納',
 callName: callName
View index.js
var myName = '驚不驚喜';
function callName() {
 console.log(this,this.myName);
}
var family = {
 myName: '來因',
 callName: function () {
 console.log(this, this.myName);
 }
}
View index.html
<ul id="app">
 <li v-for = "(items,index) in arrayData" >
 {{index}}-{{items.name}}-{{items.age}}
 </li>
</ul>
<button class="btn btn-outline-primary" @click="reverseArray">反轉陣列</button>
View index.js
var app = new Vue({
el:"#app",
data:{
arrayData: [
{
name: '小明',
age: 16
},
{
name: '漂亮阿姨',
View app.html
<ul id="app">
<li v-for="(item, key) in arrayData" :key='item.age'>
{{ key }} - {{ item.name }} {{ item.age }} 歲 <input type="text" >
</li>
</ul>
<button class="btn btn-outline-primary" @click="reverseArray">反轉陣列</button>
View index.js
var app = new Vue({
el:"#app",
data:{
arrayData: [
{
name: '小明',
age: 16
},
{
name: '漂亮阿姨',
View app.html
<div id='app'>
<input type="text" class="form-control" v-model="filterText" @keyup.enter='filterData>
<ul>
<li v-for="(item, key) in filterArray" :key="item.age">
{{ key }} - {{ item.name }} {{ item.age }} 歲 <input type="text">
</li>
</ul>
</div>
View index.js
var app = new Vue({
el: '#app',
data: {
filterArray: [],
filterText: '',
arrayData: [
{
name: '小明',
age: 16
},
View index.html
<div id='app'>
<p>請加上 v-if 判斷式</p>
<ul>
<li v-for="(item, key) in arrayData" v-if=" item.age <= 19">
{{ key }} - {{ item.name }} {{ item.age }} 歲
</li>
</ul>
</div>
View v-bind.js
new Vue({
el:"#app",
data:{
selected: 'submit',
},
})