值绑定

作者: 63537b720fdb | 来源:发表于2020-07-19 02:28 被阅读0次

值绑定就是利用数据动态渲染出结构,数据改变,结构也改变
在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>

相关文章

  • vue 之 input 的value绑定

    vue双向绑定值 vue单向绑定值

  • 值绑定

    值绑定就是利用数据动态渲染出结构,数据改变,结构也改变在label上用v-for取到colors中的每个元素ite...

  • 基本语法

    双花括号语法是 Angular 的插值绑定语法。 这个插值绑定的意思是把组件的 title 属性的值绑定到 HTM...

  • Vue入门指南(3)

    属性绑定 v-bind:给属性绑定对应的值 这时候a的href属性值就是我们希望的值。如果想将标签绑定,可以采用下...

  • 08Angular双向绑定

    双向绑定到底是什么 属性绑定+事件绑定 [value]="username" ——绑定username值到inpu...

  • element select 默认值

    1.绑定的值就是默认值

  • js 数据双向绑定

    数据绑定: 在页面中,绑定两个或多个元素之间的值,例如将input的值绑定到h1上,改变input输入框的值,h1...

  • Vue2学习笔记:vue模板语法

    一、插值(数据绑定) ①绑定纯文本{{msg}} ②绑定纯html v-html ③绑定属性 v-bind ④绑...

  • DataBinding学习(下)

    binding adapters用来设置值,提供自定义的绑定逻辑等。当绑定的值发生变化时,绑定类会自动调用view...

  • swift学习-可选值绑定作用域

    可选值绑定 使用if与语句进行可选值绑定时,绑定的常量(let),变量(var)只能在后面的大括号作用于使用 使用...

网友评论

      本文标题:值绑定

      本文链接:https://www.haomeiwen.com/subject/phuckktx.html