<!DOCTYPE html>

<html>

<head>

	<meta charset="utf-8">

	<meta http-equiv="X-UA-Compatible" content="IE=edge">

	<title>vue</title>

	<link rel="stylesheet" href="">

	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	<!-- <script type="text/javascript" src="../js/vue.js"></script> -->

	<style type="text/css">

		.h1{

			color: red;

		}

		.h2{

			color: green;

		}

		img{

			width: 150px;

			height: auto;

		}

	</style>

</head>

<body>

<div id="hdcms">

	<form action="" class="form-horizontal">

		<div class="panel panel-default">

			<div class="panel-heading">

				<h3 class="panel-title">文章管理</h3>

			</div>

			<div class="panel-body">

				<div class="form-group">

					<label for="" class="col-sm-2 control-label">标题</label>

					<div class="col-sm-10">

						<input type="text" class="form-control" v-model.trim.lazy="field.title">

						{{field.title}}

					</div>

				</div>

				<div class="form-group">

					<label for="" class="col-sm-2 control-label">栏目</label>

					<div class="col-sm-10">

						<select v-model="field.cid" class="form-control" multiple>

							<option value="">==请选择栏目==</option>

							<option v-for="v in category" :value="v.cid">{{v.title}}</option>

						</select>

					</div>

					{{field.cid}}

				</div>

				<div class="form-group">

					<label for="" class="col-sm-2 control-label">属性{{field.flag}}</label>

					<div class="col-sm-10">

						<div class="checkbox-inline" v-for="v in flag">

							<input type="checkbox" v-model="field.flag" :value="v.name"> {{v.title}}

						</div>

					</div>

				</div>

				<div class="form-group">

					<label for="" class="col-sm-2 control-label">点击数</label>

					<div class="col-sm-10">

						<input type="number" class="form-control" v-model.number="field.click">

					</div>

				</div>

				<div class="form-group">

					<label for="" class="col-sm-2 control-label">链接</label>

					<div class="col-sm-10">

						<input type="text" class="form-control" v-model="field.url"><br>

						<img :src="field.url" alt="">

					</div>

				</div>

				<div class="form-group">

					<label for="" class="col-sm-2 control-label">摘要</label>

					<div class="col-sm-10">

                        <textarea name="" class="form-control"

								  v-model="field.description"></textarea>

					</div>

					{{field.description}}

				</div>

				<div class="form-group">

					<label for="" class="col-sm-2 control-label">类型</label>

					<div class="col-sm-10">

						<div class="radio-inline" v-for="v in type">

							<input type="radio" v-model="field.type" :value="v.name"> {{v.title}}

						</div>

						{{field.type}}

					</div>

				</div>

			</div>

		</div>

		<button class="btn btn-primary col-sm-offset-2">保存</button>

	</form>

</div>

<script>

    var app = new Vue({

        el: '#hdcms',

        watch: {

            'field.click': function (n, o) {

                console.log(typeof(n));

            },

            'field.title':function(n,o){

                console.log(n.length);

            }

        },

        data: {

            type: [

                {name: 'draft', title: '草稿'},

                {name: 'send', title: '正式发布'},

                {name: 'times', title: '延迟发布'}

            ],

            flag: [

                {name: 'hot', title: '热门'},

                {name: 'recommend', title: '推荐'}

            ],

            category: [

                {cid: 1, title: 'hdphp新闻'},

                {cid: 2, title: 'HDCMS'},

                {cid: 3, title: '后盾人新闻'},

                {cid: 4, title: '后盾IT教育新闻'}

            ],

            field: {

                title: '后盾人 人人做后盾',

                click: 100,

                url: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2034208240,2505314860&fm=26&gp=0.jpg',

                description: '这是内容接要',

                type: 'send',

                flag: [],

                cid: []

            }

        },

        methods: {}

    });

</script>

</body>

</html>

效果:

37.VUE学习之-表单的综合运用的更多相关文章

  1. 【Vue】强化表单的9个Vue输入库

    一个设计不当的表单可能会使用户远离你的网站.幸运的是,对Vue开发者,有大量可用的Vue输入库让你轻松整理表单. 拥有直观而且对用户友好的表单有诸多好处,比如: 更高的转化率 更好的用户体验 更专业的 ...

  2. 034——VUE中表单控件处理之使用vue控制radio表单的实例操作

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. vue validate多表单验证思考 之前写过一个里外层，现在觉得不合适，应该平行的写，然后都给ret，最后判断ret 再做出反应，这样整体表单的所有验证就都报验证，然后最后提交的时候把组件内的对象合并到总的对象，再提交

    vue validate多表单验证思考 之前写过一个里外层,现在觉得不合适,应该平行的写,然后都给ret,最后判断ret 再做出反应,这样整体表单的所有验证就都报验证,然后最后提交的时候把组件内的对象 ...

  4. vue+element 动态表单验证

    公司最近的项目有个添加动态表单的需求,总结一下我在表单验证上遇到的一些坑. 如图是功能的需求,这个功能挺好实现的,但是表单验证真是耗费了我一些功夫. vue+element在表单验证上有一些限制,必须 ...

  5. bootstrap基础学习【表单含按钮】（二）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. vue动态生成表单

    vue动态生成表单 一.下拉框 <!DOCTYPE html> <html> <head> <meta charset="utf-8" / ...

  7. 【VUE】3.表单操作

    1. Form组件渲染 1. components -> 新增组件Form.vue <template> <div>表单验证</div> </templ ...

  8. Vue.js学习 Item9 – 表单控件绑定

    基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.根据控件类型它自动选取正确的方法更新元素.尽管有点神奇,v-model 不过是语法糖,在用户输入事件中更新数据,以及特别处理一些 ...

  9. Vue.js学习笔记——表单控件实践

    最近项目中使用了vue替代繁琐的jquery处理dom的数据更新,个人非常喜欢,所以就上官网小小地实践了一把. 以下为表单控件的实践,代码敬上,直接新建html文件,粘贴复制即可看到效果~ <! ...

随机推荐

  1. D. Time to Raid Cowavans 分块暴力，感觉关键在dp

    http://codeforces.com/contest/103/problem/D 对于b大于 sqrt(n)的,暴力处理的话,那么算出每个的复杂度是sqrt(n),就是把n分成了sqrt(n)段 ...

  2. Codeforces Beta Round #79 (Div. 1 Only) B. Buses 树状数组

    http://codeforces.com/contest/101/problem/B 给定一个数n,起点是0  终点是n,有m两车,每辆车是从s开去t的,我们只能从[s,s+1,s+2....t-1 ...

  3. (转)Web服务器磁盘满故障深入解析

    Web服务器磁盘满故障深入解析 原文:http://blog.51cto.com/oldboy/612351 ############################################# ...

  4. CentOS6.x之emacs安装配置编译

    刚开始学习linux,干学没什么意思,想在linux下写写程序,了解到linux下使用较多的是emacs和vim,在youtobe上分别看了看这两个工具进行开发的视频,个人感觉emacs比较酷一点,所 ...

  5. 多个activity之间的数据共享

    Activity之间的数据共享问题起初一看并没有那么纠结,原因在于两点,一来两个Activity之间可以通过回传的方式进行数据的共享,而哪怕是多个Activity之间,也可以通过静态类进行数据的共享. ...

  6. jquery进阶(1)

    今天我们接着来学习jQuery中的内容,包括css的操作.尺寸的操作.文档的操作.动画(有待补充),事件处理操作. 一.CSS 在css中可以设置css的基本属性 - .css("color ...

  7. 实现一个Promise.all

    用js自己实现一个Promise.all let promiseAll = (promises) => { return new Promise((resolve, reject) => ...

  8. 一个简单的EventEmitter

    用JS写了一个简单的EventEmitter: class EventEmitter { /** * 事件名/回调列表 字典 * @type {Map<string, Array<func ...

  9. 【Python】python2 html safe string

    import cgi s = '<>&' s += u'哈哈' print type(s) print s r = cgi.escape(s) print type(r) prin ...

  10. C++ 强制类型转换(转载)

    转载自:http://www.weixueyuan.net/view/6329.html 在C++语言中新增了四个关键字static_cast.const_cast.reinterpret_cast和 ...