Bootstrap 表单生成 Vue2 模板代码
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>Bootstrap Form</title>
<link rel='stylesheet' href='https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css'>
</head>
<body>
<div class='container'>
<form id='myForm' class='form-horizontal' role='form'>
<div class='form-group'>
<label for='name' class='col-sm-2 control-label'>Name</label>
<div class='col-sm-10'>
<input type='text' class='form-control' id='name' placeholder='Name'>
</div>
</div>
<div class='form-group'>
<label for='email' class='col-sm-2 control-label'>Email</label>
<div class='col-sm-10'>
<input type='email' class='form-control' id='email' placeholder='Email'>
</div>
</div>
<div class='form-group'>
<label for='message' class='col-sm-2 control-label'>Message</label>
<div class='col-sm-10'>
<textarea class='form-control' rows='5' id='message' placeholder='Message'></textarea>
</div>
</div>
<div class='form-group'>
<div class='col-sm-offset-2 col-sm-10'>
<button type='submit' class='btn btn-primary'>Submit</button>
</div>
</div>
</form>
</div>
<pre><code><script src='https://cdn.bootcss.com/vue/2.6.10/vue.min.js'></script>
<script>
new Vue({
el: '#myForm',
methods: {
submitForm: function() {
// Do something when form is submitted
}
},
template: `
<form id='myForm' class='form-horizontal' role='form' v-on:submit.prevent='submitForm'>
<div class='form-group'>
<label for='name' class='col-sm-2 control-label'>Name</label>
<div class='col-sm-10'>
<input type='text' class='form-control' id='name' placeholder='Name'>
</div>
</div>
<div class='form-group'>
<label for='email' class='col-sm-2 control-label'>Email</label>
<div class='col-sm-10'>
<input type='email' class='form-control' id='email' placeholder='Email'>
</div>
</div>
<div class='form-group'>
<label for='message' class='col-sm-2 control-label'>Message</label>
<div class='col-sm-10'>
<textarea class='form-control' rows='5' id='message' placeholder='Message'></textarea>
</div>
</div>
<div class='form-group'>
<div class='col-sm-offset-2 col-sm-10'>
<button type='submit' class='btn btn-primary'>Submit</button>
</div>
</div>
</form>
`
});
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/mzG5 著作权归作者所有。请勿转载和采集!