Vue处理用户点击事件

 时间:2026-02-14 00:05:54

1、先创建一个"click点击.html"的文件,在文件内引入vuejs。

<script src="../js/vue.js"></script>

<script type="text/javascript">

const app = new Vue({

el:'#app'

})

</script>

Vue处理用户点击事件

2、定义一个字符串;

data:{

msg:'Hello Vue!'

}

Vue处理用户点击事件

3、不要忘记,在el后面加,号。

将msg显示在网页中。

<article>{{msg}}</article>

Vue处理用户点击事件

4、创建一个按钮,用来绑定事件,触发行为。

<button class="btn" @click="reverseArr">反转字符串</button>

reverseArr事件就是用来反转字符串。

Vue处理用户点击事件

5、在methods中个,定义个方法reverseArr。

reverseArr(){

const newStr = this.msg.split("").reverse().join("")

this.msg = newStr

}

Vue处理用户点击事件

6、不要忘记上面的,号。

点击【运行】-【运行到浏览器】,选择浏览器打开(HBuilder)。

Vue处理用户点击事件

7、点击按钮【反转字符串】,查看页面显示结果。

Vue处理用户点击事件

8、也可以直接在dom中进行操作。

<div>反转结果:{{this.msg.split("").reverse().join("")}}</div>

Vue处理用户点击事件

  • Teams怎么创建新的聊天
  • python如何同时打印列表的索引位置和对应值?
  • Word文档如何给选定的文本改变颜色?
  • 膳食营养素分析如何采用残差法调整能量
  • 怎么调校capture的显示设置?
  • 热门搜索
    温州文成旅游景点 鸟巢水立方旅游攻略 爱去旅游 南海影视城旅游攻略 自治区旅游局 自由行旅游网 布鲁塞尔旅游 开平旅游景点大全 大溪地旅游攻略 美国圣地亚哥旅游攻略