千峰商城-springboot项目搭建-27-vue事件处理 v-on

最新推荐文章于 2024-08-21 17:23:56 发布

临易i

最新推荐文章于 2024-08-21 17:23:56 发布

阅读量99

点赞数

文章标签： vue.js spring boot 前端 javascript ecmascript

本文链接：https://blog.csdn.net/LYly_B/article/details/125721217

版权

在使用vue进行数据渲染时，如果使用原生的js事件绑定(如onclick)，如果需要获取vue实例中的数据并传参则需要通过拼接来完成。

vue提供了v-on指令用于绑定各种事件(v-on:click)，简化了从vue中取值的过程，但是触发的方法需要定义在vue实例的methods中。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/bootstrap.css" />
        <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
        <script type="text/javascript" src="js/vue.js"></script>
    </head>
    <body>
        <div id="container">
            <ul>
                <li v-for="c in categories">
                    <a :href="'query?cid=' + c.cid">{{c.cname}}</a>
                </li>
            </ul>
            
            <table class="table table-bordered">
                <tr>
                    <th>学号</th>
                    <th>照片</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>操作</th>
                </tr>
                <tr v-for="s,index in stus" :id="'tr'+s.stuNum">
                    <td>{{s.stuNum}}</td>
                    <td>
                        <img height="30" :src="s.stuImg" />
                    </td>
                    <td>{{s.stuName}}</td>
                    <td>
                    <!--    {{s.stuGender=='M'?'男':'女'}}-->
                        <img v-if="s.stuGender=='M'" src="img/m.bmp" />
                        <img v-else src="img/f.bmp" />
                    </td>
                    <td>{{s.stuAge}}</td>
                    <td>
                        <button type="button" class="btn btn-danger btn-xs" v-on:click="doDelete(s.stuNum)">删除</button>
                        <button type="button" class="btn btn-success btn-xs">修改</button>
                    </td>
                </tr>
            </table>
        </div>
        
        <script type="text/javascript">
            var vm = new Vue({
                el:"#container",
                data:{
                    categories:[
                    {
                        cid:1,
                        cname:"华为"
                    },{
                        cid:2,
                        cname:"小米"
                    },{
                        cid:3,
                        cname:"oppo"
                    },{
                        cid:4,
                        cname:"vivo"
                    }
                    ],
                    stus:[
                    {
                        stuNum:"10010",
                        stuImg:"img/1.jpeg",
                        stuName:"Tom",
                        stuGender:"M",
                        stuAge:20
                    },{
                        stuNum:"10011",
                        stuImg:"img/2.jpg",
                        stuName:"lilei",
                        stuGender:"M",
                        stuAge:21
                    },{
                        stuNum:"10012",
                        stuImg:"img/3.jpg",
                        stuName:"lucy",
                        stuGender:"F",
                        stuAge:26
                    },{
                        stuNum:"10013",
                        stuImg:"img/4.jpg",
                        stuName:"polly",
                        stuGender:"F",
                        stuAge:20
                    }
                    ]
                }
            },{
                methods:{
                    doDelete:function(snum){
                        console.log("----delete:"+snum")
                    }
                    
                }
            });
        </script>
        
    </body>
</html>

v-on:click可以缩写为@click

使用js函数、dataset对象传值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/bootstrap.css" />
        <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
        <script type="text/javascript" src="js/vue.js"></script>
    </head>
    <body>
        <div id="container">
            <ul>
                <li v-for="c in categories">
                    <a :href="'query?cid=' + c.cid">{{c.cname}}</a>
                </li>
            </ul>
            
            <table class="table table-bordered">
                <tr>
                    <th>学号</th>
                    <th>照片</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>操作</th>
                </tr>
                <tr v-for="s,index in stus" :id="'tr'+s.stuNum">
                    <td>{{s.stuNum}}</td>
                    <td>
                        <img height="30" :src="s.stuImg" />
                    </td>
                    <td>{{s.stuName}}</td>
                    <td>
                    <!--    {{s.stuGender=='M'?'男':'女'}}-->
                        <img v-if="s.stuGender=='M'" src="img/m.bmp" />
                        <img v-else src="img/f.bmp" />
                    </td>
                    <td>{{s.stuAge}}</td>
                    <td>
                        <button type="button" class="btn btn-danger btn-xs" v-on:click="doDelete(s.stuNum,$event)" :data-img="s.stuImg">删除</button>
                        <button type="button" class="btn btn-success btn-xs" @click="doUpdate" :data-snum="s.stuNum" :data-sname="s.stuName">修改</button>
                    </td>
                </tr>
            </table>
        </div>
        
        <script type="text/javascript">
            var vm = new Vue({
                el:"#container",
                data:{
                    categories:[
                    {
                        cid:1,
                        cname:"华为"
                    },{
                        cid:2,
                        cname:"小米"
                    },{
                        cid:3,
                        cname:"oppo"
                    },{
                        cid:4,
                        cname:"vivo"
                    }
                    ],
                    stus:[
                    {
                        stuNum:"10010",
                        stuImg:"img/1.jpeg",
                        stuName:"Tom",
                        stuGender:"M",
                        stuAge:20
                    },{
                        stuNum:"10011",
                        stuImg:"img/2.jpg",
                        stuName:"lilei",
                        stuGender:"M",
                        stuAge:21
                    },{
                        stuNum:"10012",
                        stuImg:"img/3.jpg",
                        stuName:"lucy",
                        stuGender:"F",
                        stuAge:26
                    },{
                        stuNum:"10013",
                        stuImg:"img/4.jpg",
                        stuName:"polly",
                        stuGender:"F",
                        stuAge:20
                    }
                    ]
                }
            },{
                methods:{
                    doDelete:function(snum){
                        console.log("-----delete:"+snum)
                        console.log(event.srcElement.dataset);
                    },
                    doUpdate:function(event){
                        //如果v-on绑定的js函数没有参数，那么调用的时候可以省略()
                        //同时可以给js函数一个event参数(事件对象)
                        //event表示触发当前函数的事件
                        //event.srcElement表示发生事件的元素---修改按钮
                        //event.srcElement.dataset 表示获取按钮上绑定的数据集(data开头+属性)
                        console.log("----update")
                        var stu = event.srcElement.dataset;
                        
                    }
                    
                }
            });
        </script>
        
    </body>
</html>

临易i

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
千峰商城-springboot项目搭建-27-vue事件处理 v-on

在使用vue进行数据渲染时，如果使用原生的js事件绑定(如onclick)，如果需要获取vue实例中的数据并传参则需要通过拼接来完成。vue提供了v-on指令用于绑定各种事件(v-on:click)，简化了从vue中取值的过程，但是触发的方法需要定义在vue实例的methods中。<!DOCTYPE html><html> <head> ...
复制链接

扫一扫