<!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. java多线程基础(二)--java多线程的基本使用

    java多线程的基本使用 在java中使用多线程,是通过继承Thread这个类或者实现Runnable这个接口或者实现Callable接口来完成多线程的. 下面是很简单的例子代码: package c ...

  2. Maven的学习资料收集--(一)环境搭建

    这几天在做项目的时候用到了maven,但是自己没有从来没有接触过,所以咋网上找资料,终于找到了一下的资料,这个是别人总结的,我只是转载过来积累.请尊重原创. 官网地址:http://maven.apa ...

  3. java 中的阻塞队列

    1.什么是阻塞队列: 支持阻塞的插入方法,意思是当队列满时,队列会阻塞插入元素的线程,知道队列不满. 支持阻塞的移除方法:意思是在队列为空时,获取元素的线程会等待队列变为非空. 插入和移除操作的4种处 ...

  4. C# 的两种debug 方法

    第一种:需要把调试方法改成debug代码用 #if DEBUG 包裹 using System; using System.Collections.Generic; using System.Text ...

  5. 构建高性能JavaScript应用

    前端性能优化准则: 一.减少http请求.     措施:合并小图片,css控制背景图.合并CSS,合并JS 二.使用CDN(Content Deliver Network 内容分发网络)发布静态资源 ...

  6. [翻译] Facebook HHVM 团队封闭开发三周成果展

    本人翻译的一篇文章,首发于伯乐在线. [补充信息]HipHop for PHP是一系列PHP脚本语言的程式码转换器的集合,它包含HPHPc.HPHPi.HPHPd以及HHVM,这四个脚本引擎各有所不同 ...

  7. JDBC连接数据库（Servlet+JSP）

    JDBC(Java Database connectivity),是连接数据库的一种方式.后面的框架Mybatis和Hibernate等都封装的是JDBC.在JDBC中常用的API有4个:Driver ...

  8. 做一个vue模态弹出框如何

    运用的知识点包括: 路由的配置 插槽 vue的过渡动画 路由重定向 router/index.js里面配置路由 import Vue from 'vue' import Router from 'vu ...

  9. LeetCode（605,581,566）

    LeetCode(605,581,566) 摘要:605盲改通过:581开始思路错误,后利用IDE修改(多重循环跳出方法):566用C语言时需要动态内存分配,并且入口参数未能完全理解,转用C++. 6 ...

  10. unicode字符和多字节字符的相互转换接口

    作者:朱金灿 来源:http://blog.csdn.net/clever101 发现开源代码的可利用资源真多,从sqlite3的源码中抠出了几个字符转换接口,稍微改造下了发现还挺好用的.下面是实现代 ...