<!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. javascript 理解对象--- 定义多个属性和读取属性的特性

    一 定义多个属性 ECMAScript5 定义了一个Object.defineProperties()方法,用于定义多个属性.此方法接受两个对象参数: 第一个对象:要添加或修改其属性的对象 第二个对象 ...

  2. mycat实战之性能测试

    1.安装性能监控工具 1.1 nmon 安装nmon de >#下载地址 http://nmon.sourceforge.net/pmwiki.php?n=Site.Download nmon1 ...

  3. Python的进程、线程和threading模块

    (注:本文部分内容摘自互联网,由于作者水平有限,不足之处,还望留言指正.) 怀念在学校念书的时候,我不小心触碰到了错误,老师会说:你错了:而我却总是倔强得以为自己没错.我的内心是不屑的,直到在真理面前 ...

  4. Could not connect to '192.168.89.144' (port 22)

    xshell连接linux主机时,会出现错误:Could not connect to '192.168.89.144' (port 22): Connection failed. 但是这时能ping ...

  5. JS知识点简单总结

    JS(JavaScript) 是一种解释性语言 是弱/动态 最开始用于表单验证的 JS的五个部分: 1.核心语言定义 2.原生对象和内置对象 5boolean 3.BOM 4.DOM 5.事件处理模型 ...

  6. java并发之Lock以及和synchronized区别

    从Java5之后,在Java.util.concurrent.locks包下提供了另外一种方式来实现同步访问,那就是Lock. 1.Lock 首先要说明的就是Lock,通过查看Lock的源码可知,Lo ...

  7. C#基础--多线程

    一.微软早期操作系统中的问题 在早期的操作系统中,应用程序都是在同一个地址空间中运行的,每个程序的数据其它程序都是可见的,并且因为早期CPU是单内核 的所以所有的执行都是线性的.这就引出两个问题: 第 ...

  8. 【caffe】用训练好的imagenet模型分类图像

    因为毕设需要,我首先是用ffmpeg抽取某个宠物视频的关键帧,然后用caffe对这个关键帧中的物体进行分类. 1.抽取关键帧的命令: E:\graduation design\FFMPEG\bin&g ...

  9. mysql备份脚本-mysqldump

    背景:全库备份 备份流程: 1.生成DB列表,将DB名字写入文件 2.定义备份函数,结果写入SQL文件 3.压缩文件,减少磁盘占用量 4.设置保留天数,定期删除n天之前的 5.通过for循环读取DB列 ...

  10. 20145321 《Java程序设计》第一周学习总结

    20145321 <Java程序设计>第1周学习总结 教材学习内容总结 第一章 1.三大平台:Java SE.Java EE .Java ME 2.Java SE:由JVM.JRE.JDK ...