{{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. Lua中闭包详解 来自RingOfTheC[ring.of.the.c@gmail.com]
			
    这些东西是平时遇到的, 觉得有一定的价值, 所以记录下来, 以后遇到类似的问题可以查阅, 同时分享出来也能方便需要的人, 转载请注明来自RingOfTheC[ring.of.the.c@gmail.c ...
    
			
    2. 
						
  2. configure: error: Building GCC requires GMP 4.2+, MPFR 2.4.0+ and MPC 0.8.0+.
			
    configure: error: Building GCC requires GMP 4.2+, MPFR 2.4.0+ and MPC 0.8.0+. 一.错误发生情景: 在安装gcc时,执行.c ...
    
			
    3. 
						
  3. perfect-scrollbar 轻量级滚动插件
			
    它是一个轻量级的jquery插件. 需要引入的文件: css: #box { position: absolute; overflow: hidden; height: 200px; width: 2 ...
    
			
    4. 
						
  4. js-classList修改class属性
			
    classList定义与用法 1)classList属性返回元素的类名,作为DOMTokenList对象 2)该属性用于在元素中添加,移除及切换css类 3)classList属性是只读的,但可以用a ...
    
			
    5. 
						
  5. .Net Core中的配置文件源码解析
			
    一.配置简述 之前在.Net Framework平台开发时,一般配置文件都是xml格式的Web.config,而需要配置其他格式的文件就需要自己去读取内容,加载配置了..而Net Core支持从命令行 ...
    
			
    6. 
						
  6. OS | monolithic kernel & microkernel
			
    A monolithic kernel is a kernel where all services (file system, VFS, device drivers, etc) as well a ...
    
			
    7. 
						
  7. ros pub sub ("~")
			
    base_velocity_smoother.cpp                        remap ("~")    订阅: "cmd_vel"   ...
    
			
    8. 
						
  8. 某考试 T3 sine
			
    推完一波式子之后发现是个矩阵23333. 其实只要发现是矩阵之后就是个水题了. #include<bits/stdc++.h> #define ll long long using nam ...
    
			
    9. 
						
  9. Java---详解方法传值问题
			
    过程解析: 1.首先执行int[] arr={3,5,6,1,7,9,0},遇到数组先执行等式右边的,{3,5,6,1,7,9,0}会在堆内存中开辟一块空间,分成7小块,下标分别从0~6,先进行系统初 ...
    
			
    10. 
						
  10. Java RSA 加密 解密 签名 验签
			
    原文:http://gaofulai1988.iteye.com/blog/2262802 import java.io.FileInputStream; import java.io.FileOut ...
    
			
    11.