Javascript 如何在vue的createElement中创建select?
我有一个使用模板的vue组件,我想将其更改为使用渲染功能,我知道createElement'h1','title',但如何将其与诸如'select'之类的选项一起使用?以下是基于模板的组件:Javascript 如何在vue的createElement中创建select?,javascript,vue.js,Javascript,Vue.js,我有一个使用模板的vue组件,我想将其更改为使用渲染功能,我知道createElement'h1','title',但如何将其与诸如'select'之类的选项一起使用?以下是基于模板的组件: 这是一个基于你的小提琴的基本版本 Vue.component("mySelect", { props:["value"], render(h){ const vm = this; let options = []; for (let c = 0; c < 18; c++
这是一个基于你的小提琴的基本版本
Vue.component("mySelect", {
props:["value"],
render(h){
const vm = this;
let options = [];
for (let c = 0; c < 18; c++)
options.push(h("option", {
domProps:{innerHTML: c},
attrs:{value: c},
}))
return h("select",{
domProps:{
value: this.value.value
},
on:{
input(event){
vm.$emit('input', {value:event.target.value})
}
}
}, options)
}
})
你可以试试这个:
Vue.component'myselect'{
道具:[“选项”],
资料{
返回{
项目:[
//
]
}
},
渲染h{
var self=这个
返回h'select'{
类:{“窗体控件”:true},
domProps:{value:this.option.value},
关于:{
输入事件{
self.option.value=event.target.value
}
}
},this.items.mapitem=>h'option'{
属性:{value:item}
},项目
}
}
[]
请检查§ions。以下是使用createElement选择组件: 您可以在此处看到工作小提琴: 要了解其工作原理,您可以在文档中查看API的详细信息:
道具,道具和属性,有什么区别?这里有点混乱,请开导一下,thanks@AngeloC道具用于父子通信,用于传递DOM属性,如textContent、innerHTML、acceptCharset等,而用于普通HTML属性,如id、name和类似内容。@Saurabh您知道domProps/attr是因为您阅读了vue的源代码吗?或者如果有关于domProps的vue文档?我从vue文档中搜索了domProps/createElement,但没有找到任何内容。@hyyou2010
Vue.component("mySelect", {
props:["value"],
render(h){
const vm = this;
let options = [];
for (let c = 0; c < 18; c++)
options.push(h("option", {
domProps:{innerHTML: c},
attrs:{value: c},
}))
return h("select",{
domProps:{
value: this.value.value
},
on:{
input(event){
vm.$emit('input', {value:event.target.value})
}
}
}, options)
}
})
Vue.component('myselect', {
props: ['option'],
render: function(createElement) {
var self = this
return createElement(
'select', {
domProps: {
value: self.option.value
},
on: {
input: function(event) {
self.option.value = event.target.value
}
}
}, [
createElement('option', {
attrs: {
value: 0
}
}, 'Under 1'),
createElement('option', {
attrs: {
value: 1
}
}, '1'),
]
)
},
})
// @returns {VNode}
createElement(
// {String | Object | Function}
// An HTML tag name, component options, or function
// returning one of these. Required.
'div',
// {Object}
// A data object corresponding to the attributes
// you would use in a template. Optional.
{
// (see details in the next section below)
},
// {String | Array}
// Children VNodes. Optional.
[
createElement('h1', 'hello world'),
createElement(MyComponent, {
props: {
someProp: 'foo'
}
}),
'bar'
]
)