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

您可以检查以下解决方案，因此通过指令select将focused_font的输入绑定到名为v-model的数据对象属性，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>

如何使用Vue JS为字体系列创建下拉菜单？

1 个答案: