v-on添加点击事件改变数据 methods 方法

最新推荐文章于 2021-08-26 15:39:22 发布

weixin_30950607

最新推荐文章于 2021-08-26 15:39:22 发布

阅读量196

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/jinsuo/p/7504439.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box">
{{message}}
<button v-on:click="changeMessage">点击改变</button> // 给按钮添加点击事件运行changeMessage 函数
</div>

</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
new Vue({
el:'#box', //获取id为box的元素
data:{
message:"Hello Vue!"
},
methods:{
changeMessage:function(){
this.message="hello hahaha"
}

}
})
</script>
</html>

//二次视频学习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-on实例</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>本场比赛得分：{{mark}}</p>
        <input type="button" value="加分" v-on:click="addMark">  <!---v-on绑定事件->
        <input type="button" value="减分" @click="removeMark">   <!--@click  这是一种简写的形式-->
        <input type="text" name="" v-model="mark2" v-on:keyup.enter="onenter"><!--.enter  绑定enter键。 也可写成  。13  写成对应的键盘码-->
    </div>
    
</body>
<script type="text/javascript">
    var app=new Vue({
        el:"#app",
        data:{
            mark:0,
            mark2:2,
        },
        methods:{    //   方法属性   名字不可改
            addMark:function(){   //  addMark 名可以写成任何的
                this.mark++;      //   this 　指的是 id为  app的 这个实例化对象
            },
            removeMark:function(){
                this.mark--
            },
            onenter:function(){
                    //this.mark=this.mark+parseInt(this.mark2);  //  直接获取mark  值
                    this.mark=this.$data.mark+parseInt(this.mark2);    //  层级获取 属性
            }
        }
    })
</script>
</html>

转载于:https://www.cnblogs.com/jinsuo/p/7504439.html

weixin_30950607

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v-on添加点击事件改变数据 methods 方法

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="box"> {{message}} <button v-on...
复制链接

扫一扫