<!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. DevStore教你如何玩转饥饿营销？

    首先我们必需知道: 所谓“饥饿营销”,是指商品提供者有意调低产量,以期达到调控供求关系.制造供不应求“假象”.维持商品较高售价和利润率的目的. 饥饿营销”营销方式,其通常的步骤: 1.引起关注.首先是 ...

  2. 使用Spring Session和Redis解决分布式Session跨域共享问题

    http://blog.csdn.net/xlgen157387/article/details/57406162 使用Spring Session和Redis解决分布式Session跨域共享问题

  3. 在Linux下不重启让配置文件修改后立即生效的办法

    在linux修改配置文件后可能没有生效,比如JDK文件配置,配置后可能没有生效,为了让文件生效,如下操作可以让配置文件生效. 例如,我刚修改了“/etc/profile”或“~/.bash_profi ...

  4. GRUB2 分析 （一）

    GRUB是目前较流行启动引导程序.其第二版被主流Linux发行版所包括.本文将探索和分析GRUB的设计和实现机制. boot.S是第一个研究对象,因为boot.S将被编译成boot.img(512字节 ...

  5. 如何用纯 CSS 创作一个变色旋转动画

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ejZWKL 可交互视频 ...

  6. Tomcat热部署，Web工程中线程没有终止

    近期项目中,用 jenkins 热部署 web工程时,发现工程中静态持有的线程(将ScheduledExecutorService定时任务存储在静态Map中),导致不定时出现数据库访问事务关闭异常,如 ...

  7. springmvc.xml配置图解

  8. RMI远程方法调用

    RMI远程方法调用:适用于 客户端 调用 服务器 内的方法:(Kotlin 语言编写) 如果业务为二个服务器之间的通信,还是得用消息队列的形式,因为RMI 不适合 双向 调用 下面介绍RMI 的使用方 ...

  9. webservice使用注解修改WSDL内容

    首先看我们没有修改前的WSDL内容 此时服务端的类 修改后的 注解如下 package com.xiaostudy; import javax.jws.WebMethod; import javax. ...

  10. 配置spring boot 内置tomcat的accessLog日志

    #配置内置tomcat的访问日志server.tomcat.accesslog.buffered=trueserver.tomcat.accesslog.directory=/home/hygw/lo ...