on的事件
dJ()：括号可加可不加，不影响
小栗子（一）
<div id="app">
<input type="button" value="v-on指令" v-on:click="dJ()" />
<input type="button" value="v-on缩写" @click="dJ()" />
<input type="button" value="双击事件" @dblclick="dJ()" />
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
methods: {
dJ: function() {
alert("点击事件")
}
}
})
</script>
小栗子（二）
<div id="app">
<h2 @click="toWatch"> {{watch}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
watch: "看电视",
},
methods: {
toWatch: function() {
this.watch += "吃东西"
}
}
})
</script>
小栗子(三)
<!-- 点击添加自定义参数+事件修饰符 -->
<div id="app">
<input type="button" value="点击" @click="Dj('v1')" />
<!-- 只有按下enter回车键才回出提示 -->
<input type="text" @keyup.enter="hiLook" />
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
methods: {
Dj: function(value) {
console.log("点击")
console.log(value)
},
hiLook: function() {
alert("你瞅啥！")
}
}
})
</script>
计数器小栗子（四）
<div id="app">
<button @click="sub">-</button>
<span>{{num}}</span>
<button @click="add">+</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
num: 1
},
methods: {
add: function() {
if (this.num < 100) {
this.num++;
} else {
alert("别点了")
}
},
sub: function() {
if (this.num > -100) {
this.num--;
} else {
alert("别点了")
}
}
}
})
</script>
1.if示例
<div id="app">
<h1 v-if="message=== 'A' ">A</h1>
<h1 v-else-if="message=== 'B' ">B</h1>
<h1 v-else-if="message=== 'C' ">C</h1>
<h1 v-else>no</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
message: 'B'
}
});
</script>
for
小栗子（一）
<div id="app">
<!--index是vue里面的索引-->
<li v-for="item,index in items"><!--里面的语法可以这样理解,items in 里面的每一项(items) -->
{{item.message}}-{{index}}
</li>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
items: [
{message : '吃饭'},
{message : '睡觉'},
{message : 'host'}
]
}
});
</script>
小栗子（二）
<div id="app">
<ul>
<li v-for="(item,index) in arr">
{{index+1}}数字:{{item}}
</li>
</ul>
<!-- v-for 是遍历从vegetables 中遍历出来 到 item里面 -->
<h2 v-for="item in vegetables" v-bind:title="item.age">
{{item.age}}
</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
arr: ["1", "2", "3", "4", "5"],
vegetables: [{
name: "香菜"
},
{
age: "2周"
}
]
}
})
</script>
