<!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. SPOJ - COT Count on a tree

    地址:http://www.spoj.com/problems/COT/en/ 题目: COT - Count on a tree #tree You are given a tree with N  ...

  2. Winter-1-C A + B II 解题报告及测试数据

    Time Limit:1000MS Memory Limit:32768KB Description I have a very simple problem for you. Given two i ...

  3. android studio 模拟器中文乱码

    这是因为编码格式不统一导致的,在android studio的build.gradle加入默认编码声明就可以了 compileOptions.encoding = "GBK" 参考

  4. Hive环境安装

    说明: (Hbase依赖于Hadoop,同时需要把元数据存放在mysql中),mysql自行安装 Hadoop2.0安装参考我的博客: https://www.cnblogs.com/654wangz ...

  5. Java哲学家进餐

    某次操作系统实验存档. 这个哲学家除了吃就是睡.. 哲学家.java: package operating.entity.philosophyeating; import operating.meth ...

  6. ubuntu 16.04 gtx1060 显卡安装【转】

    本文转载自:https://blog.csdn.net/u010925447/article/details/79754044 版权声明:本文为博主原创文章,未经博主允许不得转载. https://b ...

  7. vector vector int 初始化

    方法一: vector<vector<int>>array=(2,vector<int>()); array[0].push_back(1); array[i].p ...

  8. <The old man and the sea>

    Every day is a new day. It is better to be lucky. But i would rather be exact. Then when luck comes ...

  9. 【bzoj2563】阿狸和桃子的游戏（贪心+构造）

    题目传送门:bzoj2563 先膜拜一波PoPoQQQ的题解:BZOJ 2563 阿狸和桃子的游戏 贪心 其实我们可以这样看:把一条边的权值均分到两个端点,那么取到两个端点就能得到这条边的边权,如果只 ...

  10. JDK 中的监控与故障处理工具-04 (jmap)

    jmap : memory map for java jmap 命令用于生成堆转储快照文件, 一般称为heapdump 或者 dump 文件.如果不是用 jmap 命令, 要获得 java 堆转储快照 ...