如何在vue的createElement中创建一个select? [英] how to create a select in vue's createElement?
本文介绍了如何在vue的createElement中创建一个select?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个使用模板的vue组件,我想将其更改为使用渲染功能,我知道createElement('h1','title'),但是如何使用像'select'这样的东西选项?这是基于模板的组件:
I have a vue component that uses template, I'd like to change it to use render function, I know createElement('h1', 'title'), but how to use it with something like 'select' with all the options? here is the template based component:
https:// jsfiddle .net / aaoehLqe /
<div id="app">
<p>{{ message }}</p>
<myselect v-bind:option= "option" ></myselect>
{{option}}
</div>
推荐答案
以下是 createElement
:
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'),
]
)
},
})
你可以在这里看到工作小提琴: https://jsfiddle.net/aaoehLqe/1/
You can see the working fiddle here: https://jsfiddle.net/aaoehLqe/1/
了解具体方法它有效,你可以看到 createElement 的API详情docs:
To understand how it works, you can see the API details of createElement in docs:
// @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'
]
)
这篇关于如何在vue的createElement中创建一个select?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文