首页 > 其他分享 >vue再读13-系统指令v-on

vue再读13-系统指令v-on

时间:2023-02-11 14:33:48浏览次数:46  
标签:function count 13 vue console log 按钮 再读 methods


<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>
<!-- 数据渲染界面 -->
<div id="abc">
{{count}}
<button v-on:click="count=count+10">按钮1</button>
<button v-on:click="fn2()">按钮2</button>
<button v-on:click="fn2()">按钮3</button>
<button @click="fn5(1000)">按钮4</button>
<button @click="fn5(1000)">按钮5</button>
<!-- 当前的事物对象 -->
<button @click="fn6($event)">按钮6</button>
</div>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
//v-on里面的methods方法
el: '#abc',
//模板ajax返回的数据
data: {
msg: '我是歌谣',
count: 10
},
methods: {
fn2: function() {
console.log('fn.....')
},
fn5: function(x) {
console.log(x);
},
fn6(e) {
console.log(e);
}
}
})
</script>
</body>

</html>

vue再读13-系统指令v-on_前端

 

标签:function,count,13,vue,console,log,按钮,再读,methods
From: https://blog.51cto.com/u_15460007/6050421

相关文章

  • vue再读10-差值表达式
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</t......
  • vue再读11-指令解释
      <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Documen......
  • vue再读9-实例选项method
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</t......
  • vue再读14-系统指令v-for
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</t......
  • vue再读8-实例选项data
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</t......
  • vue再读6-vue的helloworld
    ####2.2HelloWorld>作用:将数据应用在html页面中1.body中,设置Vue管理的视图<divid="app"></div>2.引入vue.js3.实例化Vue对象newVue();4.设置......
  • vue再读3-vue能做什么
    ####1.3Vue能做什么-最大程度上解放了DOM操作-单页web项目(SinglePageApplication项目,例如[Worktile官网](https://worktile.com/))开发-传统网站开发  ......
  • vue再读7-实例选项el
      ......
  • vue再读37-过滤器的使用日期格式
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</t......
  • 重读vue电商网站4之登录页面总结使用 iconfont 给输入框添加图标
    在 ​​main.js​​​ 中导入字体图标​​​​​​然后在 ​​el-input​​ 组件中通过 ​​prefix-icon​​ 进行相关图标引用​​​​最终效果图如下: ......