<!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. Java设计模式—单例模式

    Singleton是一种创建型模式,指某个类采用Singleton模式,则在这个类被创建后,只可能产生一个实例供外部访问,并且提供一个全局的访问点. 核心知识点如下: (1) 将采用单例设计模式的类的 ...

  2. 【android】activity的4种启动模式简介

    首先咱必须知道,activity是以栈(后进先出)的结构进行管理的. 当活动A启动了活动B时,A被压入到栈内,B在栈的最顶层.当B调用finish()结束活动时,B从栈弹出,此时A在栈的最顶层. 我们 ...

  3. C++命名规则(转)

    如果想要有效的管理一个稍微复杂一点的体系,针对其中事物的一套统一.带层次结构.清晰明了的命名准则就是必不可少而且非常好用的工具. 活跃在生物学.化学.军队.监狱.黑社会.恐怖组织等各个领域内的大量有识 ...

  4. spark[源码]-sparkContext详解[一]

    spark简述 sparkContext在Spark应用程序的执行过程中起着主导作用,它负责与程序和spark集群进行交互,包括申请集群资源.创建RDD.accumulators及广播变量等.spar ...

  5. Webpack+React+ES6 最新环境搭建和配置（2017年）

    刚刚学习React,发现React在ES6下的语法才是本体,结合ES6新的语言特性,使组件化开发显得更加直观.而且现在的Angular2也开始使用支持强类型的TypeScript,转译(transpi ...

  6. jvm3---垃圾回收器算法

    .1. GC算法 .1.1. 标记-清除算法(Mark-Sweep) 1.标记出所有需要回收的对象,在标记完成后统一回收所有被标记的对象 2.在标记完成后统一回收所有被标记的对象 缺点:一个是效率问题 ...

  7. spark + yarn调试问题java.nio.channels.ClosedChannelException

    spark客户端提交任务至yarn,后台抛错,FinalStatus:UNDEFINED. ./spark-submit  --class org.apache.spark.examples.Spar ...

  8. mapper的namespace

    一般情况下mapper的namespace能随便写,不重复即可, 但如果希望使用mybatis动态代理的接口,就需要namespace中的值和需要对应的Mapper(dao)接口的全路径一致.例如:c ...

  9. 20145314郑凯杰《信息安全系统设计基础》第5周学习总结 part B

    20145314郑凯杰<信息安全系统设计基础>第5周学习总结 part B 在前四天的学习中,我主要对课本知识进行了总结,在本周后三天的学习过程中,我进行实践并截图. http://www ...

  10. 20145322 《Java程序设计》第7周学习总结

    20145322何志威 <Java程序设计>第7周学习总结 教材学习内容总结 第十二章 如果使用JDK8的话,可以使用Lambda特性去除重复的信息. 在只有Lambda表达式的情况下,参 ...