值绑定

2020-07-19  本文已影响0人  63537b720fdb

值绑定就是利用数据动态渲染出结构,数据改变,结构也改变
在label上用v-for取到colors中的每个元素item,
label for的值和input id的值都为item,点击label区域,就会跳转到input区域
在input上用v-bind动态绑定value值
mastach语法显示item

        <div id="app">
            <label v-for="item in colors" for="item">
                <input type="checkbox" id="item" :value="item"/>{{item}}
            </label>
        </div>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            const app = new Vue({
                el: '#app',
                data: {
                    colors:['红','黄','蓝','绿']
                }
            })
        </script>
上一篇下一篇

猜你喜欢

热点阅读