<!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. ADODB.Stream在进行文件上传时报错

    最近在做web项目,有个控件是上传材料文件和文件夹,本地运行正常,放到服务器上,一直报错:AutoRuntime服务器无法创建..... 解决方法: 1.配置ie浏览器的安全级别 2.修改ie浏览器对 ...

  2. Unity C# 脚本的单例

    今天学习了一个比较不错的单例模式 public class UnitySigleton <T>: MonoBehaviour where T:class { public static T ...

  3. sublime格式化HTML+CSS插件--HTML-CSS-JS Prettify

    介绍 在工作中经常会下载不同项目的源码,可能是压缩的原因,其中一些代码的格式十分的乱,这样就会导致阅读起来十分的不方便,所以下面介绍一个sublime的插件:HTML-CSS-JS Prettify ...

  4. XShell远程连接本地虚机

    有很多朋友在自己电脑上部署完成了虚机,但是不知道怎么去用工具连接自己的虚机,下面给大家讲一下大概的步骤,不足之处敬请指正!! 1.打开我们的虚拟机平台,登录虚机 2.远程那肯定要知道虚机的IP地址,在 ...

  5. hibernate课程 初探单表映射3-3 对象类型

    本节简介: 1 简介对象类型(重点是音视频blob类型) 2 demo(对图片的写入数据库与读取) 1 简介对象类型 映射类型 java类型 标准sql类型 mysql类型 oracle类型 bina ...

  6. git 初始化仓库与远程clone

    使用命令 git –bare init /home/git/myRep.git,初始化化仓库 在gitClient_01上,通过git clone命令进行克隆远程仓库,并在各自的电脑上运行开发. Gi ...

  7. C#开发android应用实战 源码

    原书名: Professional Android Programming with Mono for Android and .NET/C#     Download Title Size Down ...

  8. Unity调用外部摄像头，全屏显示摄像头画面

    有两种方法,常用的是GUI方法,代码如下: public class CameraTest : MonoBehaviour { WebCamTexture camTexture; void Start ...

  9. mybatis 异常处理：Invalid bound statement (not found)

    mybatis 的使用过程中提示错误: org.apache.ibatis.binding.BindingException: Invalid bound statement (not found): ...

  10. Pylint 是什么

    Pylint 是什么 Pylint 是一个 Python 代码分析工具,它分析 Python 代码中的错误,查找不符合代码风格标准(Pylint 默认使用的代码风格是 PEP 8,具体信息,请参阅参考 ...