请求数据原理:
执行方法,传入值:
事件传值:
拖拽移动或点击触发事件;
获取自定义属性的值:
方法调用的2中方式:
<template>
<div id="app">
<button v-on:click="run1()">点击运行方法一</button>
<button @click="run2()">点击运行方法二</button>
</div>
</template>
<script>
export default {
//name:"app",
data(){
return{
}
},methods:{
run1(){
alert("方法一运行了");
},
run2:function(){
alert("方法二运行了");
}
}
}
</script>
<style>
</style>
<template>
<div id="app">
<hr>
<button @click="getMsg1()">获取数据</button>
</div>
</template>
<script>
export default {
//name:"app",
data(){
return{
msg:"abccc",
}
},methods:{
getMsg1(){
alert(this.msg);
alert("方法三运行了");
}
}
}
</script>
<style>
</style>
<template>
<div id="app">
<button @click="setMsg1()">获取数据</button>
</div>
</template>
<script>
export default {
//name:"app",
data(){
return{
msg:"abccc",
}
},methods:{
setMsg1(){
this.msg="重新赋值了!";
}
}
}
</script>
<style>
</style>
<template>
<div id="app">
<button @click="requestData()">请求数据</button>
<hr>
<ul>
<li v-for="its in list" :key="its">
{{its}}
</li>
</ul>
</template>
<script>
export default {
// name:"app",
data(){
return{
list:[]
}
},
methods:{
requestData(){
for(var i=0;i<10;i++){
this.list.push("第"+i+"条数据;");
}
}
}
}
</script>
<style>
</style>
<template>
<div id="app">
<button @click="requestData()">请求数据</button>
<hr>
<ul>
<li v-for="(its,key) in list" :key="its">
{{key}}-----{{its}}
</li>
</ul>
</template>
<script>
export default {
// name:"app",
data(){
return{
list:[]
}
},methods:{
requestData(){
for(var i=0;i<10;i++){
this.list.push("第"+i+"条数据;");
}
}
}
}
</script>
<style>
</style>
删除数据:
<template>
<div id="app">
<hr>
<button @click="delData('1')">删除数据</button>
<hr>
</template>
<script>
export default {
// name:"app",
data(){
return{
list:[]
}
},methods:{
requestData(){
for(var i=0;i<10;i++){
this.list.push("第"+i+"条数据;");
}
},
delData(i){
this.list.pop("第"+i+"条数据;");
}
}
}
</script>
<style>
</style>
从栈顶开始删除数据;
<template>
<div id="app">
<button @click="eventFn($event)">点击事件</button>
</div>
</template>
<script>
export default {
// name:"app",
data(){
return{
msg:"abccc"
}
},methods:{
eventFn(e){
console.log(e);
alert(e.value);
}
}
}
</script>
<style>
</style>
<template>
<div id="app">
<button @click="eventFn($event)">点击事件</button>
</div>
</template>
<script>
export default {
// name:"app",
data(){
return{
msg:"abccc"
}
},methods:{
eventFn(e){
console.log(e);
e.srcElement.style.background="red";
}
}
}
</script>
<style>
</style>
<template>
<div id="app">
<button id="123456" @click="eventFn($event)">点击事件</button>
</div>
</template>
<script>
export default {
// name:"app",
data(){
return{
msg:"abccc"
}
},methods:{
eventFn(e){
console.log(e);
e.srcElement.style.background="red";
console.log(e.srcElement.dataset.id);
}
}
}
</script>
<style>
</style>