vue.js 复选框checkbox单独使用时，组合使用 和操作radio

模板数据

<template>
    <div>
        <!-- checkbox单独使用时，不需要绑定v-model，直接用v-bind绑定一个布尔值，为真时选中，为假时不选 -->
        <label>checkbox做单选使用</label>
        <br>
        <input type="checkbox" :checked='checked'>知识
        <p v-if="checked">选中了</p>
        <p v-else>没有选中</p>

        <br>
        <!--组合使用 单选，只能有一个 -->
        <p>组合使用radio  单选，只能有一个</p>
        <input type="radio" v-model="picked" value="html">html
        <input type="radio" v-model="picked" value="js">js
        <input type="radio" v-model="picked" value="css">css
        <p>选择的项是：{{picked}}</p>

        <!-- checkbox复合使用 -->
        <label>选择状态:{{ischecked}}</label>
        <br>
        <br>
        <input type="checkbox" v-model="ischecked">知识
        <!-- 在勾选时，数据ischecked的值变为true  label的值也会渲染 -->
        <br>
        <br>
        <br>
        <p>复选框</p> 
        <input type="checkbox" v-model="ispicked" value="html">html
        <input type="checkbox" v-model="ispicked" value="js">js
        <input type="checkbox" v-model="ispicked" value="css">css
        <p>选择的是：{{ispicked}}</p>
    </div>
</template>

script代码

<script>
    export default {
        data(){
            return{
                checked:true,
                ischecked:false,
                picked:'js',
                ispicked:['js']
            }
        }
    }
</script>