在使用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>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之家整理，本文链接：https://www.bmabk.com/index.php/post/128147.html
