<!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. centos7开启网卡功能

    centos7安装完成后,网卡默认是关闭的,未分配ip地址 解决办法: 1.cd /etc/sysconfig/network-scripts/ 2.ls查看网卡 3.修改该文件 vi ifcfg-e ...

  2. mellanox RDMA RoCE

    一:首先根据系统发行版本下载对应的驱动,下载地址如下: http://www.mellanox.com/page/products_dyn?product_family=26&mtag=lin ...

  3. JS答辩习题

    php高中班javascript答辩题目 1 什么是javascript?  答:Javascript是一种专门设计用来增强网页交互性的脚本语言,它也是一种解释型语言. 2 Javascript与C语 ...

  4. win764位英文版系统unicode编码问题

    出现的编码现象: 1.以*.vga格式的课件文件,当作好可读html之后,仍然不能播放,此时为Unicode编码所致: 2.在编辑TXT文档时,内容凡有中文,在保存时,会提示不能识别,当确认后,中文字 ...

  5. saltstack1

    saltstack三种运行模式: local本地.master/minion(类似于agent).salt ssh saltstack三大功能: 远程执行.配置管理.云管理 saltstack安装:1 ...

  6. tomcat+svn+maven+jenkins实现自动构建

    首先说明一个各软件的版本: tomcat:apache-tomcat-8.5.16.tar.gz maven:apache-maven-3.5.0-bin.tar.gz svn:subversion- ...

  7. DDOS防护原理

    1.常见DDoS攻击分类 DDoS粗略分类为流量型攻击和CC攻击.流量型攻击主要是通过发送报文侵占正常业务带宽,甚至堵塞整个数据中心的出口,导致正常用户访问无法达到业务服务器.CC攻击主要是针对某些业 ...

  8. z-albert之开启博文之路

    其实注册博客园已经蛮久的了,一直都只是停留在看,却没有自己动手一篇属于自己的技术博文.之所以以前一直没写,以前没有工作,一直都是小白.然而今天为什么感写了呢,并不是自己比以前懂得多多少,而是希望将自己 ...

  9. [BZOJ1217]消防局的设立

    Description 2020年,人类在火星上建立了一个庞大的基地群,总共有n个基地.起初为了节约材料,人类只修建了n-1条道路来 连接这些基地,并且每两个基地都能够通过道路到达,所以所有的基地形成 ...

  10. 关于vuex与v-route的结合使用

    把vue实际用于项目的过程中遇到过一些问题 1.如何将vuex和vue-route结合使用(接口调用成功回调页面这类等等) 1.初始考虑的方法是在vuex引入vue-router,vuex写一些业务逻 ...