关于自定义指令具体介绍请查看官方文档。这里不做详细介绍。
这里写的歌demo,关于点击编辑按钮，输入框自动获取焦点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义指令demo</title>
</head>
<body>
<div id="box">
<ul>
<li v-for="list in lists">
<input type="text" v-model="list.name" :readonly="list.isEdit" :key="list.num" @blur="cancelEdit(list)" v-focus>
<input type="button" value="编辑" @click="editlist(list)">
</li>
</ul>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.5.11/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el : "#box",
data : {
lists :[
{"isEdit":true,"name":"首页","num":0},
{"isEdit":true,"name":"发现","num":1},
{"isEdit":true,"name":"个人中心","num":2},
{"isEdit":true,"name":"我的","num":3}
]
},
methods : {
editlist: function(el){
var newList = el;
newList.isEdit = false;
this.lists.splice(el.num, 1, newList);
},
cancelEdit: function(el){
var newList = el;
newList.isEdit = true;
this.lists.splice(el.num, 1, newList);
}
},
directives : {
focus : {
update : function(el){
if(el.getAttribute("readonly") != "readonly"){
el.focus()
}
}
}
}
})
</script>
</html>
133
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
