<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>表单控件处理之动态绑定文章的属性的处理方法 </title>

    <script src="vue.js"></script>

</head>

<body>

<div id="lantian">

    <!--单选-->

    {{state}}

    <div v-for="v in type">

        <input type="radio" v-model="state" :value="v.name">{{v.title}}

    </div>

    <!--多选：-->

    {{cheBox}}

    <div v-for="v in flag">

        <input type="checkbox" v-model="cheBox" :value="v.name">{{v.title}}

    </div>

</div>

<script>

    var app = new Vue({

        el: '#lantian',

        data: {

            type: [

                {name: 'draft', title: '草稿'},

                {name: 'send', title: '正式发布'},

                {name: 'times', title: '延迟发布'}

            ],

            flag: [

                {name: 'hot', title: '热门'},

                {name: 'recommend', title: '推荐'},

            ],

            state:'send',

            cheBox:[]

        }

    });

</script>

</body>

</html>

　　

036——VUE中表单控件处理之动态绑定文章的属性的处理方法的更多相关文章

  1. 037——VUE中表单控件处理之表单修饰符：lazy/number/trim

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 035——VUE中表单控件处理之使用vue控制select操作文字栏目列表

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 034——VUE中表单控件处理之使用vue控制radio表单的实例操作

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 032——VUE中表单控件处理之复选框的处理

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 031——VUE中表单控件处理之使用vue控制input和textarea表单项

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Vue表单控件绑定

    前面的话 本文将详细介绍Vue表单控件绑定 基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.v-model本质上不过是语法糖,它负 ...

  7. 关于vue.js中表单控件绑定练习

    html: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8 ...

  8. Vue#表单控件绑定

    使用v-model 在表单控件上实现数据双向绑定. 单选:https://jsfiddle.net/miloer/bs49p0fx/ <input type="checkbox&quo ...

  9. vue表单控件绑定（表单数据的自动收集）

    v-model指令 你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇 但 v-model 本质上不过是语法糖,它负责监听用户的 ...

随机推荐

  1. ansible playbook部署ELK集群系统

    一.介绍 总共4台机器,分别为 192.168.1.99 192.168.1.100 192.168.1.210 192.168.1.211 服务所在机器为: redis:192.168.1.211 ...

  2. JVM调优总结(转)

    本文转自:http://my.oschina.net/xishuixixia/blog/132395 常用的调优参数. 1.堆大小 -Xms和-Xmx用于指定堆大小,我们需要将他们俩设置为一样的值,以 ...

  3. 20145316许心远《Java程序设计》第4周学习总结

    20145316许心远<Java程序设计>第4周学习总结 教材学习内容总结 6.继承与多态 1．继承共同行为 * 多个类中存在相同属性和行为时,将这些内容抽取到单独一个类中,那么多个类无需 ...

  4. linq分析

    例如: var sums = modellist .GroupBy(x => x.userId) .Select(group => new { Peo = group.Key, fist ...

  5. 设置小窗口Activity

    http://blog.csdn.net/xieyihua1994/article/details/52586270 我们知道Activity本身是没有界面的.所以activity类创建了一个窗口,开 ...

  6. hadoop namenode HA集群搭建

    hadoop集群搭建(namenode是单点的)  http://www.cnblogs.com/kisf/p/7456290.html HA集群需要zk, zk搭建:http://www.cnblo ...

  7. 20145327 《Java程序设计》第五周学习总结

    20145327 <Java程序设计>第五周学习总结 教材学习内容总结 try...catch:与C语言中程序流程和错误处理混在一起不同,Java中把正常流程放try块中,错误(异常)处理 ...

  8. 关于JavaScript对象中的一切（二） -- 继承

    先上一张我制作的思维导图.

  9. Ansible Playbooks入门介绍

    1.目录结构 2.详细目录 3.主任务文件main.yaml 主任务文件main.yaml - name: print server name and user to remote testbox # ...

  10. 对linux内核创建flash上的各分区源码进行分析

    1.注意:内核源码版本为4.9 2.首先注意关键字符串"partitions found on MTD device 这句话在drivers/mtd/mtdpart.c的parse_mtd_ ...