搜索

首页  >  问答  >  正文

javascript - 组件里边的value无法动态绑定值。

这个是要写的组件的代码,跟不是组件的代码

    <p id="parent">
        <child :message="animal"></child>
    </p>

    <select name="sth" id="sth">
        <option :value="value">{{text}}</option>
    </select>

下边的是JS

Vue.component('child',{
    template:'<select :name="message+\'Select\'">\
        <optgroup :label="message">\
            <option :value="message">{{message}}</option>\
        </optgroup>\
    </select>',
    props:['message']
});
new Vue({
    el:"#parent",
    data:{
        animal:'phoenix'
    }
});
new Vue({
    el:"#sth",
    data:{
        value:'animal',
        text:'animation'
    }
});

最后渲染出来的是

<p id="parent">
    <select name="phoenixSelect">
        <optgroup label="phoenix">
            <option>phoenix</option>
        </optgroup>
    </select>
</p>
<select name="sth" id="sth">
    <option value="animal">animation</option>
</select>

下边那个非组件的,value就能正常显示成动态值animal,而上边那个是组件的,name跟label都正常,就是value显示不出来,请问是为什么啊?

曾经蜡笔没有小新曾经蜡笔没有小新2745 天前376

全部回复(1)我来回复

  • 我想大声告诉你

    我想大声告诉你2017-05-19 10:20:31

    有的啊https://jsfiddle.net/stardew/...

    回复
    0
  • 取消回复