概述
fda算法
Vue营养标签 (vue-nutrition-label)
A VueJS component to create a 2018 FDA-style nutrition label.
VueJS组件可创建2018年FDA风格的营养标签。
View demo
查看演示
Download Source
下载源
安装 (Installation)
通过npm (via npm)
npm install vue-nutrition-label --save通过CDN (via CDN)
<script src="https://cdn.jsdelivr.net/npm/vue-nutrition-label/dist/vue-nutrition-label.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vue-nutrition-label/dist/vue-nutrition-label.min.css" rel="stylesheet" type="text/css">用法 (Usage)
通过npm (via npm)
<!-- Vue component -->
<template>
<div>
<nutrition-label :options="options" v-model="item"></nutrition-label>
</div>
</template>
<script>
import NutritionLabel from 'vue-nutrition-label';
// register globally
Vue.component('nutrition-label', NutritionLabel);
export default {
// or register locally
components: {
NutritionLabel
},
data () {
return {
options: {},
item: {}
};
}
}
</script>
<style>
your styles
</style>通过CDN (via CDN)
<html>
<head>
<title>...</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-nutrition-label/dist/vue-nutrition-label.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vue-nutrition-label/dist/vue-nutrition-label.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="app">
<nutrition-label :options="options" v-model="item"></nutrition-label>
</div>
<script>
var vm = new Vue({
el: '#app',
components: {
'nutrition-label': window.VueNutritionLabel.NutritionLabel
},
data() {
return {
options: {},
item: {}
});
</script>
</body>
</html>：选项 (:options)
The options prop must be an Object.
options prop必须是Object 。
const options = {
width: 280,
useFdaRounding: 1, // use FDA rounding rules
readOnly: false, // show/hide serving input field
multipleItems: false,
addedSugars: {
show: 1,
na: 1
},
calcium: {
show: 1,
na: 1
},
calories: {
show: 1,
na: 1
},
cholesterol: {
show: 1,
na: 1
},
fatCalories: {
show: 1,
na: 1
},
fiber: {
show: 1,
na: 1
},
iron: {
show: 1,
na: 1
},
monounsaturatedFat: {
show: 0,
na: 1
},
polyunsaturatedFat: {
show: 0,
na: 1
},
potassium: {
show: 1,
na: 1
},
protein: {
show: 1,
na: 1
},
saturatedFat: {
show: 1,
na: 1
},
sodium: {
show: 1,
na: 1
},
sugarAlcohol: {
show: 0,
na: 1
},
sugars: {
show: 1,
na: 1
},
totalCarb: {
show: 1,
na: 1
},
totalFat: {
show: 1,
na: 1
},
transFat: {
show: 1,
na: 1
},
vitaminA: {
show: 1,
na: 1
},
vitaminC: {
show: 1,
na: 1
},
vitaminD: {
show: 1,
na: 1
}
}项目对象 (Item Object)
const item = {
name: 'Double Cheese Burger',
serving: 1,
servingPerContainer: 0,
servingUnitName: 'serving',
ingredientStatement: 'Swiss cheese, American cheese, more cheese and a burger.',
nutrition: {
calories: 510,
fatCalories: 170,
totalFat: 19,
saturatedFat: 9,
transFat: 0,
polyunsaturatedFat: 0,
monounsaturatedFat: 0,
cholesterol: 10,
sodium: 560,
totalCarb: 79,
fiber: 4,
sugars: 35,
protein: 9,
vitaminA: 1,
vitaminC: 2,
calcium: 35,
iron: 1,
addedSugars: 0,
potassium: 100,
vitaminD: 0,
servingWeight: 175
}
}构建设置 (Build Setup)
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run bundle翻译自: https://vuejsexamples.com/vuejs-component-to-create-a-2018-fda-style-nutrition-label/
fda算法
最后
以上就是要减肥小白菜为你收集整理的fda算法_VueJS组件可创建2018年FDA风格的营养标签的全部内容，希望文章能够帮你解决fda算法_VueJS组件可创建2018年FDA风格的营养标签所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复