Vue2复选框模板生成器：一键生成Vue2代码
<!DOCTYPE html>
<html>
<head>
<title>Checkbox to Vue2 Template</title>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
</head>
<body>
<div id='app'>
<h2>Checkbox to Vue2 Template</h2>
<form>
<label v-for='(option, index) in options' :key='index'>
<input type='checkbox' :value='option.value' v-model='selectedOptions'> {{ option.label }}
</label>
</form>
<br>
<pre>{{ template }}</pre>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
options: [
{ label: 'Option 1', value: 'option1' },
{ label: 'Option 2', value: 'option2' },
{ label: 'Option 3', value: 'option3' },
{ label: 'Option 4', value: 'option4' },
],
selectedOptions: []
},
computed: {
template: function() {
var template = '<label v-for='(option, index) in options' :key='index'>\n';
template += '\t<input type='checkbox' :value='option.value';
template += ' v-model='selectedOptions'> {{ option.label }}\n';
template += '</label>';
return template;
}
}
})
</script>
</body>
</html>
原文地址: http://www.cveoy.top/t/topic/myBd 著作权归作者所有。请勿转载和采集!