首先，我是NodeJS的新手。我正在尝试在链接和图像源中表达参数，但无法正常工作。
> <!-- template.html --> <link rel="stylesheet" type="text/css"
> href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
> <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <div
> class="container" id="app">
> <div class="row">
> <div class="col-md-6 col-md-offset-3">
> <h1>Search</h1>
> </div>
> </div>
> <div class="row">
> <div class="col-md-4 col-md-offset-3">
> <form action="" class="search-form">
> <div class="form-group has-feedback">
> <label for="search" class="sr-only">Search</label>
> <input type="text" class="form-control" name="search" id="search" placeholder="search" v-model="query" >
> <span class="glyphicon glyphicon-search form-control-feedback"></span>
> </div>
> </form>
> </div>
> </div>
> <div class="row">
> <div class="col-md-3" v-for="result in results">
> <div class="panel panel-default">
> <div class="panel-heading">
> <!-- display the city name and country --> <b>TIME:</b> {{ result._source.frametime }}, <b>FROM:</b> {{
> result._source.sourceip }} , <img id="link2">
> </div>
> <div class="panel-body">
> <!-- display the latitude and longitude of the city --> <p><b>Destination IP</b>: {{ result._source.destip }}, <b>Destination PORT</b>: {{ result._source.destporttcp }} </p> </br>
> </div>
> </div>
> </div>
> </div> </div> <!--- some styling for the page --> <style>
> .search-form .form-group {
> float: right !important;
> transition: all 0.35s, border-radius 0s;
> width: 32px;
> height: 32px;
> background-color: #fff;
> box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
> border-radius: 25px;
> border: 1px solid #ccc;
> }
>
> .search-form .form-group input.form-control {
> padding-right: 20px;
> border: 0 none;
> background: transparent;
> box-shadow: none;
> display: block;
> }
>
> .search-form .form-group input.form-control::-webkit-input-placeholder {
> display: none;
> }
>
> .search-form .form-group input.form-control:-moz-placeholder {
> /* Firefox 18- */
> display: none;
> }
>
> .search-form .form-group input.form-control::-moz-placeholder {
> /* Firefox 19+ */
> display: none;
> }
>
> .search-form .form-group input.form-control:-ms-input-placeholder {
> display: none;
> }
>
> .search-form .form-group:hover,
> .search-form .form-group.hover {
> width: 100%;
> border-radius: 4px 25px 25px 4px;
> }
>
> .search-form .form-group span.form-control-feedback {
> position: absolute;
> top: -1px;
> right: -2px;
> z-index: 2;
> display: block;
> width: 34px;
> height: 34px;
> line-height: 34px;
> text-align: center;
> color: #3596e0;
> left: initial;
> font-size: 14px;
> } </style>
>
> <script> var app = new Vue({
> el: '#app',
> // declare the data for the component (An array that houses the results and a query that holds the current search string)
> data: {
> results: [],
> query: ''
> },
> // declare methods in this Vue component. here only one method which performs the search is defined
> methods: {
> // make an axios request to the server with the current search query
> search: function() {
> axios.get("http://192.168.100.244:3001/search?q=" + this.query)
> //var strLink = "http://192.168.100.244/images/" + this.query;
> //document.getElementById("link2").setAttribute("href",strLink);
> .then(response => {
> this.results = response.data;
>
> })
> }
> },
> // declare Vue watchers
> watch: {
> // watch for change in the query string and recall the search method
> query: function() {
> this.search();
> }
> }
>
> })
>
>
> </script>
这是我的template.html文件。我可以从结果中放置值，但是当我在img或链接中放置参数时，它不会通过。
例如：如果result._source.url
包含（google.com），我需要像<a href=http://{{result._source.url}}></a>
有帮助吗？
答案 0 :(得分：0)
让我们尝试
<a href=`http://${result._source.url}`></a>
如果您需要传递args：
const http = `${URL}/?ret=${URL_ARGS}`;
...
...
<a href={http}>
rgds