<!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. rem值计算------移动端开发计算方式

    移动端开发: <meta name="viewport" content="width=device-width, initial-scale=1, maximum ...

  2. POJ 3905 Perfect Election (2-SAT 判断可行)

    题意:有N个人参加选举,有M个条件,每个条件给出:i和j竞选与否会只要满足二者中的一项即可.问有没有方案使M个条件都满足. 分析:读懂题目即可发现是2-SAT的问题.因为只要每个条件中满足2个中的一个 ...

  3. 【转】阿里巴巴技术专家杨晓明：基于Hadoop技术进行地理空间分析

    转自:http://www.csdn.net/article/2015-01-23/2823687-geographic-space-base-Hadoop [编者按]交通领域正产生着海量的车辆位置点 ...

  4. 【Maven】在intellij里，体验Maven

    1:配置Maven 从官网下载,然后将bin目录添加到系统变量Path中, 在cmd窗口,输入mvn,有执行反馈即配置成功. 配置conf/settings.xml文件,指定仓库中心下载到本地的目录 ...

  5. spark[源码]-DAG调度器源码分析[二]

    前言 根据图片上的结构划分我们不难发现当rdd触发action操作之后,会调用SparkContext的runJob方法,最后调用的DAGScheduler.handleJobSubmitted方法完 ...

  6. wait、notify为什么要放在同步代码块中

    等待方遵循的原则: 获取对象的锁,不满足条件就调用wait()方法,条件满足继续执行 通知方原则: 获取对象的锁,改变条件,然后notify 每个对象都有一个监视器锁,这个监视器锁的数据结构如下: w ...

  7. netty6---序列化与反序列化

    package com.cn; import java.io.ByteArrayInputStream; import java.io.ByteArrayOutputStream; import ja ...

  8. 【Head First Servlets and JSP】笔记 28： 过滤器与包装器

    1.过滤器的执行顺序: <url-pattern> 为第一梯队, <servlet-name> 为第二梯队,梯队内的执行顺序和 DD 里的声明顺序相同. When the co ...

  9. 计算mysql 数据库 表大小 服务器传输 小写表明转成大写

    //数据库表存储大小 select table_schema,table_name,table_rows,concat(round(data_length/1024/1024/1024,2),'GB' ...

  10. hadoop HA+kerberos HA集群搭建

    IP.主机名规划 hadoop集群规划: hostname IP hadoop 备注 hadoop1 110.185.225.158 NameNode,ResourceManager,DFSZKFai ...