{{define "chkUrl"}}
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>chkUrl--脚本管理</title>
    <link rel="stylesheet" href="/static/WeUI_files/weui.css">
    <link rel="stylesheet" href="/static/WeUI_files/example.css">
</head>
<body style="margin:1em ;">
<div class="weui-cells page__category-content">
    <div class="page__hd">
        <h1 class="page__title">chkUrl</h1>
        <p class="page__desc">检测url状态信息</p>
    </div>
</div>
<div class="weui-cells page__category-content">
{{range .}}
    <form action="/chkUid" method="POST">
        <div class="weui-cell weui-cell_swiped">
            <div class="weui-flex">
                <div class="weui-flex__item">
                    <div class="placeholder">{{.Host}}</div>
                </div>
                <div class="weui-flex__item">
                    <div class="placeholder">{{.Port}}</div>
                </div>
                <div class="weui-flex__item">
                    <div class="placeholder">{{.Path}}</div>
                </div>
                <div class="weui-flex__item">
                    <div class="placeholder">{{.ScriptName}}</div>
                </div>
                <div class="weui-flex__item">
                    <div class="placeholder"><input class="weui-input" type="number" pattern="[0-9]*"
                                                    value="weui input error"
                                                    placeholder="请输入uid（0-9）" style="margin-left: 2em;" name="uid">
                    </div>
                </div>
                <div class="weui-flex__item">
                    <div class="placeholder">
                        <button class="weui-swiped-btn weui-swiped-btn_warn" href="javascript:"
                                style="color: #FFF;text-align: center;" type="submit">运行
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </form>
{{end}}
</div>
<div id="app">
@@message@@
</div>
</body>

</html>
<script src="/static/js/vue.js"></script>
<script>
    var app = new Vue({
        delimiters: ["@@", "@@"],
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })
</script>
{{end}}


extend选项和delimiters选项 - CSDN博客 https://blog.csdn.net/dear_mr/article/details/72667749

id重复  
{{define "chkUrl"}}
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>chkUrl--脚本管理</title>
    <link rel="stylesheet" href="/static/WeUI_files/weui.css">
    <link rel="stylesheet" href="/static/WeUI_files/example.css">
</head>
<body style="margin:1em ;">
<div class="weui-cells page__category-content">
    <div class="page__hd">
        <h1 class="page__title">chkUrl</h1>
        <p class="page__desc">检测url状态信息</p>
    </div>
</div>
<div class="weui-cells page__category-content">
{{range .}}
{{/*<form action="/chkUid" method="POST">*/}}
    <div class="weui-cell weui-cell_swiped" id="appT">
        <div class="weui-flex">
            <div class="weui-flex__item">
                <div class="placeholder">{{.Host}}</div>
            </div>
            <div class="weui-flex__item">
                <div class="placeholder">{{.Port}}</div>
            </div>
            <div class="weui-flex__item">
                <div class="placeholder">{{.Path}}</div>
            </div>
            <div class="weui-flex__item">
                <div class="placeholder">{{.ScriptName}}</div>
            </div>
            <div class="weui-flex__item">
                <div class="placeholder"><input class="weui-input" type="number" pattern="[0-9]*"
                                                value="weui input error"
                                                placeholder="请输入uid（0-9）" style="margin-left: 2em;" name="uid">
                </div>
            </div>
            <div class="weui-flex__item">
                <div class="placeholder">
                    <button class="weui-swiped-btn weui-swiped-btn_warn" href="javascript:"
                            style="color: #FFF;text-align: center;" type="submit" v-on:click="t()">运行    @{message}@
                    </button>
                </div>
            </div>
        </div>
    </div>
{{/*</form>*/}}
{{end}}
</div>

</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
<script>
    let app = new Vue(
            {
                delimiters: ['@{', '}@'],
                el: '#appT',
                data: {message: 'Hello Vue!'},
                methods: {
                            t: function() {
                                        this.$http.get('/testVue', {foo: 'bar'}).then(
                                            response => {
                                            // get status
                                            response.status;
                                            // get status text
                                            response.statusText;
                                            // get 'Expires' header
                                            response.headers.get('Expires');
                                            // get body data
                                            //注意服务端为“Email”,
                                            // response.body.Email; 数据不被解析
                                            app.message = response.body.email;
                                            },
                                            response =>{// error callback
                                            }
                                    )
                                }
                            },
            }
    );
</script>
{{end}}




												


											
extend选项和delimiters选项  vue  数据绑定  html form 对比  id重复的更多相关文章
	

    
								
  1. Vue数据绑定(一)
		
    Contents Vue作为当下炙手可热的前端三大框架之一,一直都想深入研究一下其内部的实现原理,去学习MVVM模式的精髓.如果说MVVM是当下最流行的图形用户界面开发模式,那么数据绑定则是这一模式的 ...
    
		
    2. 
						
  2. (三)vue数据绑定及相应的命令
		
    vue数据绑定及相应的命令 {{ Text }} 双括号进行数据渲染 动态绑定数据 例如:{{message}} data: { return{ message: 'Hello Vue!' } } 2 ...
    
		
    3. 
						
  3. Vue数据绑定
		
    gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson04 一 双括号用来数据绑定 (1)写法一: {{message}}, ...
    
		
    4. 
						
  4. 浅析vue数据绑定
		
    前言:最近团队需要做一个分享,脚进脑子,不知如何分享.最后想着之前一直想研究一下 vue 源码,今天刚好 "借此机会" 研究一下. 网上研究vue数据绑定的文章已经非常多了,但是自 ...
    
		
    5. 
						
  5. Vue数据绑定和响应式原理
		
    Vue数据绑定和响应式原理 当实例化一个Vue构造函数,会执行 Vue 的 init 方法,在 init 方法中主要执行三部分内容,一是初始化环境变量,而是处理 Vue 组件数据,三是解析挂载组件.以 ...
    
		
    6. 
						
  6. zencart后台管理中选项名称和选项内容和属性控制页面出错解决办法 WARNING: An Error occurred, please refresh the page and try again
		
    后台管理中选项名称和选项内容和属性控制出现以下错误的解决办法WARNING: An Error occurred, please refresh the page and try again zen  ...
    
		
    7. 
						
  7. 17: VUE数据绑定 与 Object.defineProperty
		
    VUE数据绑定原理:https://segmentfault.com/a/1190000006599500?utm_source=tag-newest Object.defineProperty(): ...
    
		
    8. 
						
  8. Ceph 存储集群1-配置：硬盘和文件系统、配置 Ceph、网络选项、认证选项和监控器选项
		
    所有 Ceph 部署都始于 Ceph 存储集群.基于 RADOS 的 Ceph 对象存储集群包括两类守护进程: 1.对象存储守护进程( OSD )把存储节点上的数据存储为对象: 2.Ceph 监视器( ...
    
		
    9. 
						
  9. 「每日一题」有人上次在dy面试，面试官问我：vue数据绑定的实现原理。你说我该如何回答？
		
    关注「松宝写代码」,精选好文,每日一题 ​时间永远是自己的 每分每秒也都是为自己的将来铺垫和增值 作者:saucxs | songEagle 来源:原创 一.前言 文章首发在「松宝写代码」 2020. ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. js-jquery 中$.ajax  -浅显接触
			
    工作了将近2年,终于开始自己写ajax了!!!真紧张的! 当年培训时就没有学ajax,就让我们自己看看,我是那种主动学习的人吗?不是!!!所以搞不懂ajax!!!!! 在工作中,数据的绑定我们之前都是 ...
    
			
    2. 
						
  2. Codeforces 321D  Ciel and Flipboard（结论题+枚举）
			
    题目链接   Ciel and Flipboard 题意  给出一个$n*n$的正方形,每个格子里有一个数,每次可以将一个大小为$x*x$的子正方形翻转 翻转的意义为该区域里的数都变成原来的相反数.  ...
    
			
    3. 
						
  3. Python通用编程
			
    本文是Python通用编程系列教程,已全部更新完成,实现的目标是从零基础开始到精通Python编程语言.本教程不是对Python的内容进行泛泛而谈,而是精细化,深入化的讲解,共5个阶段,25章内容.所 ...
    
			
    4. 
						
  4. expect实现自动分发密钥、网站度量术语
			
    1.优化ssh命令 sed -ir '13 iPort 52113\nPermitRootLogin no\nPermitEmptyPasswords no\n UseDNS no\nGSSAPIAu ...
    
			
    5. 
						
  5. spring security 单一账户多地方登陆提醒, ajax 拦截器 Interceptor
			
    spring-security.xml部分代码: <http auto-config="false" > <access-denied-handler ref=& ...
    
			
    6. 
						
  6. soursTree新建过程.md
			
    网上博客 https://www.cnblogs.com/tian-xie/p/6264104.html 主要的推送流程 完成所有项目的远程推送工作 点击git工作流选择第二个建立新的版本; 输入发布 ...
    
			
    7. 
						
  7. objective-c 类目(Category)和延展(Extension)
			
    类目的基本概念: 如果有封装好的一个类,随着程序功能的增加,需要在类中增加一个方法,那我们就不必在那个类中做修改或者再定义一个子类,只需要在用到那个方法时添加一个该类的类目即可. 1.在类目定义的方法 ...
    
			
    8. 
						
  8. 了解使用Android ConstraintLayout
			
    说明 Google I/O 2016 上发布了 ConstraintLayout, 简直是要变革 Android 写界面方式. 于是第二天我立即找到相关文档尝试, 这是官方提供的 Codelab 项目 ...
    
			
    9. 
						
  9. 使用sqlalchemy查询并删除数据表的唯一性索引
			
    简单描述表结构,字段类型 desc tabl_name 删除索引:alter table `db`.`table_name` drop index `index_name`  注意里面的特殊符号: ` ...
    
			
    10. 
						
  10. pandas常见函数详细使用
			
    groupby函数 pandas提供了一个灵活高效的groupby功能,它使你能以一种自然的方式对数据集进行切片.切块.摘要等操作,根据一个或多个键(可以是函数.数组.Series或DataFrame ...
    
			
    11.