如何在Bootsrap网格系统中使用块式Vue Js？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在Bootsrap网格系统中使用块式Vue Js？相关的知识，希望对你有一定的参考价值。
这里是代码
我已经已经读过类似这样的其他问题但不了解
我正尝试在每[[2个项目
中添加引导程序行Vue.component('col-md-6',
props: ['data'],
template: '<div class="col-md-6"><div class="form-group"> <label :for=" data.inid "> data.label </label><input type="" :disabled="data.dsbl" class="form-control" :id=" data.inid " :placeholder=" data.label "> </div> </div>',
)
var inputgen = new Vue(
el: "#container",
data:
inputs: [
id: 0,
type: '',
inid: 'no',
dsbl: true,
label: 'Ariza №'
,
id: 1,
type: '',
inid: 'rw',
status: "",
label: 'Asosiy menu'
,
id: 2,
type: '',
inid: 'wer',
status: "",
label: 'Asosiy menu'
,
id: 3,
type: '',
inid: 'w4er',
status: "",
label: 'Asosiy menu'
,
]
,
)<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="row" id="container" >
<col-md-6 v-for="item in inputs" v-bind:data="item" v-bind:key="item.id"></col-md-6>
</div>在对数组进行分块后，您将得到类似的结果。
[ [object, object], [object, object] ]
Vue.component('col-md-6', props: ['data'], template: '<div class="col-md-6"><div class="form-group"> <label :for=" data.inid "> data.label </label><input type="" :disabled="data.dsbl" class="form-control" :id=" data.inid " :placeholder=" data.label "> </div> </div>', ) var inputgen = new Vue( el: "#container", computed: chunkedInputs() return this.chunkArray(this.inputs, 2) , methods: chunkArray(myArray, chunk_size) var index = 0; var arrayLength = myArray.length; var tempArray = []; for (index = 0; index < arrayLength; index += chunk_size) myChunk = myArray.slice(index, index+chunk_size); tempArray.push(myChunk); return tempArray; , data: inputs: [ id: 0, type: '', inid: 'no', dsbl: true, label: 'Ariza №' , id: 1, type: '', inid: 'rw', status: "", label: 'Asosiy menu' , id: 2, type: '', inid: 'wer', status: "", label: 'Asosiy menu' , id: 3, type: '', inid: 'w4er', status: "", label: 'Asosiy menu' , ] )
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="container">
<div class="row" v-for="chunk in chunkedInputs">
<col-md-6 v-for="item in chunk" v-bind:data="item" v-bind:key="item.id"></col-md-6>
</div>
</div>以上是关于如何在Bootsrap网格系统中使用块式Vue Js？的主要内容，如果未能解决你的问题，请参考以下文章