javascript - 如何使用 vue js 为字体系列制作下拉菜单？

Question

我有以下 select，其中包含我希望适用于我的文本的字体系列:

<select v-model="focused_font">
    <option value="" disabled selected>Font</option>
    <option v-for="font in available_fonts" v-bind:value="font" 
            v-bind:style="{fontFamily : font}" @>
        {{ font }}
    </option>
</select>

我尝试使用 Vue.js 制作下拉菜单，但我失败了。这是我的数据对象:

data: {
  available_fonts: [
    "Pacifico", 
    "Dancing Script", 
    "Shadows Into Light", 
    "Lobster", 
    "Anton", 
    "Indie Flower", 
    "Charmonman", 
    "Kodchasan", 
    "Notable", 
    "Mali", 
    "Srisakdi", 
    "Slabo 27px"
  ]
}

Answer 1

您可以检查以下解决方案，因此通过指令 v-model 将您的 select 输入绑定(bind)到名为 focused_font 的数据对象属性，每个option 中 select 包含一个字体系列名称，该字体系列名称又适用于该选项，我添加了一些文本以通过 绑定(bind)样式来查看选择效果>:style="{fontFamily : focused_font}"。

new Vue({
  el: '#app',
 data: {
    focused_font:'',
    available_fonts: ["Pacifico", "Dancing Script", "Shadows Into Light", "Lobster", "Anton", "Indie Flower", "Charmonman", "Kodchasan", "Notable", "Mali", "Srisakdi", "Slabo 27px"]
    }

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" >
<div id="app">
<select v-model="focused_font">
    <option value="" disabled selected>Font</option>
    <option v-for="font in available_fonts" v-bind:value="font" v-bind:style="{fontFamily : font}" >{{ font }}</option>
</select>

<p :style="{fontFamily : focused_font}">Some text to test font</p>
</div>