代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
padding: 50px;
}
.container {
padding: 40px 80px 15px 80px;
background-color: #fff;
border-radius: 8px;
max-width: 800px;
}
.heading {
text-align: center;
}
.btn {
outline: none !important;
color:white;
}
.btn.btn-primary {
background-color: #5c4084;
border-color: #5c4084;
outline: none;
}
.btn.btn-primary:hover {
background-color: #442f62;
border-color: #442f62;
}
.btn.btn-primary:active, .btn.btn-primary:focus {
background-color: #684895;
border-color: #684895;
}
.btn.btn-primary .fa {
padding-right: 4px;
}
.form-group {
margin-bottom: 25px;
text-align: left;
}
</style>
</head>
<body translate="no">
<div class="container" id="app">
<div class="form-group">
<input type="text" class="form-control" ref="search" placeholder="Focus On Me" />
</div>
<div class="form-group">
<button type="button" class="btn btn-primary btn-block" @click="setFocus()">Set Focus</button>
</div>
</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1.js"></script>
<script>
new Vue({
el: '#app',
data: {},
methods: {
setFocus: function () {
// Note, you need to add a ref="search" attribute to your input.
this.$refs.search.focus();
}
}
});
</script>
</body>
</html>
网友回复
我知道答案，我要回答
私活外包
