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

【问题标题】：How can I make a dropdown menu for font families using vue js?如何使用 vue js 为字体系列制作下拉菜单？
【发布时间】：2019-03-06 13:08:12
【问题描述】：

我有以下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"
  ]
}

【问题讨论】：

“但是我失败得很厉害” 如何失败吗？跨度>
@ 在你的<option> 标签中做什么？

标签： javascript css vue.js vuejs2 vue-component

【解决方案1】：

您可以检查以下解决方案，因此通过指令v-model 将您的select 输入绑定到名为focused_font 的数据对象属性，其中每个option select 包含一个字体系列名称，该名称依次是适用于该选项，我添加了一些文本，以便通过: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>

【讨论】：