<!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. git 常用的撤销操作

    git 开发时的使用流程,从同事那里学习的, 第一步,先建立一个新的分支,可以在GITLAB或通过命令git checkout -b newbranch 或通过IDE插件 第二步,让项目切换到该分支, ...

  2. eclipse 编译的时候 自动把SDK需要放入libs里面的so文件给删除了

    解决方法: 右击Project,选Properties->Builders, 把CDT Builder 关掉. 这样就不会编译了.包括c++的代码也不会编译.. 治标不治本啊...以后c++代码 ...

  3. “凯易迅Calix”实习上机——求元音开头辅音结尾的子串

    题目要求: 对于一个输入的字符串(26个小写字母组成),求出他的所有子串中元音开头,辅音结尾的子串.在这所有的子串中,输出第一个和最后一个. 例如aab,共有子串a,aa,aab,ab,b:但是满足元 ...

  4. windows server 2012泛域名解析配置

    应测试要求,要将一个泛域名(*.office.baibai.com)解析到一个内网的IP(10.1.100.240)地址上(使用域控DNS解析)...以下为我的配置过程,做的时候将图顺便接了下来: 1 ...

  5. 20145327 《Java程序设计》第九周学习总结

    20145327 <Java程序设计>第九周学习总结 教材学习内容总结 JDBC是用于执行SQL的解决方案,开发人员使用JDBC的标准接口,数据库厂商则对接口进行操作,开发人员无需接触底层 ...

  6. 20145328 《Java程序设计》第3周学习总结

    20145328 <Java程序设计>第3周学习总结 教材学习内容总结 第四章 对象Object:存在的具体实体,具有明确的状态和行为 类Class:具有相同属性和行为的一组对象的集合,用 ...

  7. 20144303 《Java程序设计》第一周学习总结

    20144303 <Java程序设计>第一周学习总结 教材学习内容总结 下载.安装.调试了JDK. JavaSE是各语言个应用平台的基础,分为四个主要的部分:JVE,JRE,JDK,和ja ...

  8. slf4j日志框架绑定机制

    一.环境搭建 我们以log4j为例,探寻slf4j与log4j的绑定过程. 1.Java类 public class Slf4jBind { public static void main(Strin ...

  9. 使用vs的时候，遇到这个：当前不会命中断点 还没有为该文档加载任何符号

    一 http://stackoverflow.com/questions/2155930/fixing-the-breakpoint-will-not-currently-be-hit-no-symb ...

  10. Linux服务器上ftp的搭建和使用

    知识点: 1.  FTP的简介.工作原理 2.在Linux上搭建FTP服务器 参考: 阿里云文档:https://help.aliyun.com/knowledge_detail/60152.html ...