Vue.js - 将二进制字符串绑定到复选框输入的组件

Question

在Vue.js中，我如何编写一个绑定到1和0字符串的组件，例如＆＃34; 111001011＆＃34;，并将这些数据作为一组命名复选框表示给用户？< / p>

Answer 1

也许这就是你要找的东西：

App.vue

<template>
    <div id="app">
        <checkboxes :binary="binary"></checkboxes>
    </div>
</template>

<script>
import Checkboxes from './components/Checkboxes'

export default {
    name: 'app',
    data(){
        return {
            binary: "11001011"
        };
    },
    components: {
        Checkboxes
    }
}
</script>

Checkboxes.vue：

<template>
    <div>
        <ul>
            <li v-for="position in binary.length">
                <label>
                    <input type="checkbox" :name="binary[position - 1]" :checked="binary[position - 1] == '1' ? true : false"> {{ binary[position - 1] }}
                </label>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'checkboxes',
    props: {
        binary: {
            required: true,
            type: String
        }
    }
}
</script>

这将通过字符串长度，并且每个字符将根据二进制值（1/0）标记为已选中/未选中

结果：