Blogger Information
Blog 250
fans 3
comment 0
visits 321531
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
vue自学:如何用Vue做一个基础计数器(v-on、methods方法挂载)
梁凯达的博客
Original
812 people have browsed it

<!DOCTYPE html>

<html lang="zh">
<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>Vue.js自学:利用Vue做一个计数器</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h2>当前计数值:{{count}}</h2>
<button v-on:click="add">+</button>
<button @click="sub">-</button>
</div>
</body>
<script type="text/javascript">
//v-on:click=”function”
//v-on 监听事件
//v-on:click 监听点击事件
//v-on:click=”function” 监听点击事件增加多一个函数
//methods:挂载函数方法
//$this.count:找到当前的属性
//{{message}}基础输出
const app = new Vue({
el:’#app’,
data:{
count:’1’
},
methods:{
add:function(){
this.count++;
console.log(‘增长正常执行’);
},
sub:function(){
this.count—;
console.log(‘减少正常执行’);
}
}
})
</script>
</html>

Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post