vuejs将链接的href更改为选定的选项值

时间：2018-04-04 19:32:22

标签： php jquery mysql html5 vue.js

大家好，所以我有一个包含多个选项的select标签，其中包含的值是url。当用户选择一个选项时，我希望链接的href相应地更新。我正在使用vuejs，但我真的不在乎你是否在Jquery中这样做。列表中有多个项目，每个项目都分配了正确的值。我只需要一种方法来在选择一个选项时更新href。谢谢我的方式，我知道你们中的一个人会说“（势利的口音）OMG喜欢认真使用循环通过所有链接”我只是测试垃圾，这个页面的每个部分都在工作我真的需要一种方式使用所选项的值更新链接。感谢。

<?php require_once('init.php');
$query="SELECT * FROM `bannerStock`";
$result = mysqli_query($db_conx, $query);
    $myArray=[];
while($row=mysqli_fetch_assoc($result)) {
    $name=$row['name'];
         $categorytoadd="";
      if($row['Automotive']==1){$categorytoadd.=' Automotive';}
                                if($row['Backgrounds']==1){$categorytoadd.=' Backgrounds';}
                                if($row['Church']==1){$categorytoadd.=' Church';}
                                if($row['Community']==1){$categorytoadd.=' Community';}
                                if($row['Money']==1){$categorytoadd.=' Money';}
                                if($row['Food']==1){$categorytoadd.=' Food';}
                                if($row['Gaming']==1){$categorytoadd.=' Gaming';}
                                if($row['Healthcare']==1){$categorytoadd.=' Healthcare';}
                                if($row['Holidays']==1){$categorytoadd.=' Holidays';}
                                if($row['Sports']==1){$categorytoadd.=' Sports';}
                                if($row['Patriotic']==1){$categorytoadd.=' Patriotic';}
                                if($row['Retail']==1){$categorytoadd.=' Retail';}
                                if($row['Education']==1){$categorytoadd.=' Education';}
                                if($row['Misc']==1){$categorytoadd.=' Misc';}
                                $rowNumb=$row['id'];
    $poster = "<video style='width:400px; height=200px;' controls loop preload=\"none\" poster=\"https://www.mysiteaddress.com/ce/bannerStockUpload/" . $row['name'] ."/". $row['name'] ."_thumb.jpg\"><source src=\"https://www.mysiteaddress.com/ce/bannerStockUpload/". $row['name'] ."/". $row['name'] ."_thumb.mp4\" type=\"video/mp4\"><source src=\"https://www.mysiteaddress.com/ce/bannerStockUpload/". $row['name'] ."/". $row['name'] ."_thumb.webm\" type=\"video/webm\"></video>";
//    $url = 'download.php/?id='.$row['id'].''; <a :href="item.downloadurl" target="_blank" class="btn btn-primary">Download$row['downloadurl'] = $url;
    $link1 ="https://www.mysiteaddress.com/ce/bannerStockUpload/{$name}/{$name}_1080.mp4";
    $link2 ="https://www.mysiteaddress.com/ce/bannerStockUpload/{$name}/{$name}_1080.wmv";
    $link3 ="https://www.mysiteaddress.com/ce/bannerStockUpload/{$name}/{$name}_432.mp4";
    $link4 ="https://www.mysiteaddress.com/ce/bannerStockUpload/{$name}/{$name}_432.wmv";
    $link5 ="https://www.mysiteaddress.com/ce/bannerStockUpload/{$name}/{$name}_324.mp4";
    $link6 ="https://www.mysiteaddress.com/ce/bannerStockUpload/{$name}/{$name}_324.wmv";
    $link7 ="https://www.mysiteaddress.com/ce/bannerStockUpload/{$name}/{$name}_216.mp4";
    $link8 ="https://www.mysiteaddress.com/ce/bannerStockUpload/{$name}/{$name}_216.wmv";
    $link9 = "https://www.mysiteaddress.com/ce/bannerStockUpload/{$name}/{$name}_184.mp4";
    $link10 = "https://www.mysiteaddress.com/ce/bannerStockUpload/{$name}/{$name}_184.wmv";
    $link11 = "https://www.mysiteaddress.com/ce/bannerStockUpload/{$name}/{$name}_160.mp4";
    $link12 = "https://www.mysiteaddress.com/ce/bannerStockUpload/{$name}/{$name}_160.wmv";
    $link13 = "https://www.mysiteaddress.com/ce/bannerStockUpload/{$name}/{$name}_128.mp4";
    $link14 = "https://www.mysiteaddress.com/ce/bannerStockUpload/{$name}/{$name}_128.wmv";
    $link15 = "https://www.mysiteaddress.com/ce/bannerStockUpload/{$name}/{$name}_108.mp4";
    $link16 = "https://www.mysiteaddress.com/ce/bannerStockUpload/{$name}/{$name}_108.wmv";
    $link17 = "https://www.mysiteaddress.com/ce/bannerStockUpload/{$name}/{$name}_80.mp4";
    $link18 = "https://www.mysiteaddress.com/ce/bannerStockUpload/{$name}/{$name}_80.wmv";
    $link19 = "https://www.mysiteaddress.com/ce/bannerStockUpload/{$name}/{$name}_1080.jpg";
    $link20 = "https://www.mysiteaddress.com/ce/bannerStockUpload/{$name}/{$name}_432.jpg";
    $link21 = "https://www.mysiteaddress.com/ce/bannerStockUpload/{$name}/{$name}_324.jpg";
    $link22 = "https://www.mysiteaddress.com/ce/bannerStockUpload/{$name}/{$name}_216.jpg";
    $link23 = "https://www.mysiteaddress.com/ce/bannerStockUpload/{$name}/{$name}_184.jpg";
    $link24 = "https://www.mysiteaddress.com/ce/bannerStockUpload/{$name}/{$name}_160.jpg";
    $link25 = "https://www.mysiteaddress.com/ce/bannerStockUpload/{$name}/{$name}_128.jpg";
    $link26 = "https://www.mysiteaddress.com/ce/bannerStockUpload/{$name}/{$name}_108.jpg";
    $link27 = "https://www.mysiteaddress.com/ce/bannerStockUpload/{$name}/{$name}_80.jpg";

    if($row['vid']==1){
    $vidclass='vid';    
    } else{
$vidclass='novid';
    } 
    if($row['image']==1){
        $imgclass='jpg';
    } else{
        $imgclass='nojpg';
    }
    $row['link1'] = $link1;
    $row['link2'] = $link2;
    $row['link3'] = $link3;
    $row['link4'] = $link4;
    $row['link5'] = $link5;
    $row['link6'] = $link6;
    $row['link7'] = $link7;
    $row['link8'] = $link8;
    $row['link9'] = $link9;
    $row['link10'] = $link10;
    $row['link11'] = $link11;
    $row['link12'] = $link12;
    $row['link13'] = $link13;
    $row['link14'] = $link14;
    $row['link15'] = $link15;
    $row['link16'] = $link16;
    $row['link17'] = $link17;
    $row['link18'] = $link18;
    $row['link19'] = $link19;
    $row['link20'] = $link20;
    $row['link21'] = $link21;
    $row['link22'] = $link22;
    $row['link23'] = $link23;
    $row['link24'] = $link24;
    $row['link25'] = $link25;
    $row['link26'] = $link26;
    $row['link27'] = $link27;
    $row['vidclass'] = $vidclass;
    $row['imgclass'] = $imgclass;
    $row['class']= $categorytoadd;
    $row['poster'] = $poster;
    array_push($myArray, $row);

}
?>

<!doctype html>
<html>
<head>    
    <style>
        .novid:{display: none;}
        .nojpg{display: none;}
    </style>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://unpkg.com/vue"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>
<body>
  <div id="app">
      <input type='text' v-model='keyword' placeholder='search item'>
  <button v-on:click='showall'>ALL</button>
      <button v-on:click="showauto">Auto</button>
      <button v-on:click="showbackgrounds">Backgrounds</button>
      <button v-on:click="showchurch">Church</button>
      <button v-on:click="showcommunity">Community</button>
      <button v-on:click="showmoney">Money</button>
      <button v-on:click="showfood">Food</button>
      <button v-on:click="showgaming">Gaming</button>
      <button v-on:click="showhealthcare">Healthcare</button>
      <button v-on:click="showholidays">Holidays</button>
      <button v-on:click="showsports">Sports</button>
      <button v-on:click="showpatriotic">Patriotic</button>
      <button v-on:click="showretail">Retail</button>
      <button v-on:click="showeducation">Education</button>
      <button v-on:click="showmisc">Misc</button>

      <div v-for="item in filteredItemList">
<div :class="['video', item.class]">
    <div v-html='item.poster'>

    </div>
    <div>{{ item.name_short }} - {{item.id}}</div>
        <select :class='item.id'>
<option :class='item.vidclass' :value="item.link1">{{item.name}} 1920x1080.mp4</option>
<option :class='item.vidclass' :value="item.link2">{{item.name}} 1920x1080.wmv</option>
<option :class='item.vidclass' :value="item.link3">{{item.name}} 432x432.mp4</option>
<option :class='item.vidclass' :value="item.link4">{{item.name}} 432x432.wmv</option>
<option :class='item.vidclass' :value="item.link5">{{item.name}} 432x324.mp4</option>
<option :class='item.vidclass' :value="item.link6">{{item.name}} 432x324.wmv</option>
<option :class='item.vidclass' :value="item.link7">{{item.name}} 432x216.mp4</option>
<option :class='item.vidclass' :value="item.link8">{{item.name}} 432x216.wmv</option>
<option :class='item.vidclass' :value="item.link9">{{item.name}} 432x184.mp4</option>
<option :class='item.vidclass' :value="item.link10">{{item.name}} 432x184.wmv</option>
<option :class='item.vidclass' :value="item.link11">{{item.name}} 432x160.mp4</option>
<option :class='item.vidclass' :value="item.link12">{{item.name}} 432x160.wmv</option>
<option :class='item.vidclass' :value="item.link13">{{item.name}} 432x128.mp4</option>
<option :class='item.vidclass' :value="item.link14">{{item.name}} 432x128.wmv</option>
<option :class='item.vidclass' :value="item.link15">{{item.name}} 432x108.mp4</option>
<option :class='item.vidclass' :value="item.link16">{{item.name}} 432x108.wmv</option>
<option :class='item.vidclass' :value="item.link17">{{item.name}} 432x80.mp4</option>
<option :class='item.vidclass' :value="item.link18">{{item.name}} 432x80.wmv</option>
<option :class='item.imgclass' :value="item.link19">{{item.name}} 432x1080.jpg</option>
<option :class='item.imgclass' :value="item.link20">{{item.name}} 432x432.jpg</option>
<option :class='item.imgclass' :value="item.link21">{{item.name}} 432x324.jpg</option>
<option :class='item.imgclass' :value="item.link22">{{item.name}} 432x216.jpg</option>
<option :class='item.imgclass' :value="item.link23">{{item.name}} 432x184.jpg</option>
<option :class='item.imgclass' :value="item.link24">{{item.name}} 432x160.jpg</option>
<option :class='item.imgclass' :value="item.link25">{{item.name}} 432x128.jpg</option>
<option :class='item.imgclass' :value="item.link26">{{item.name}} 432x108.jpg</option>
<option :class='item.imgclass' :value="item.link27">{{item.name}} 432x80.jpg</option>
        </select>
    <a href='#' class="btn btn-primary" :id='item.id' download>Download</a>
    </div>
          </div>

      </div>
  <script>
  var app = new Vue({
    el: '#app',
    data: {
      itemList: [],
        keyword:'',
    },
    created: function() {
        this.loaddata();
    },
    methods: {
            loaddata: function(){
                  var vueapp = this;
                        vueapp.itemList = <?php echo json_encode($myArray, JSON_PRETTY_PRINT); ?>;
                },
        showall: function(){
            $('.video:not(.all)').hide();
          $('.video:not(.all)').show();  
        },
        showauto: function(){
        $('.video:not(.all)').hide();
        $('.video:not(.all)').show();
        $('.video:not(.Automotive)').hide();
        },

        showbackgrounds: function(){
        $('.video:not(.all)').hide();
        $('.video:not(.all)').show();
        $('.video:not(.Backgrounds)').hide();            
        },

        showchurch: function(){
        $('.video:not(.all)').hide();
        $('.video:not(.all)').show();
        $('.video:not(.Church)').hide();
        },

        showcommunity: function(){
        $('.video:not(.all)').hide();
        $('.video:not(.all)').show();
        $('.video:not(.Community)').hide();
        },

        showmoney: function(){
        $('.video:not(.all)').hide();
        $('.video:not(.all)').show();
        $('.video:not(.Money)').hide();
        },

        showfood: function(){
        $('.video:not(.all)').hide();
        $('.video:not(.all)').show();
        $('.video:not(.Food)').hide();
        },

        showgaming: function(){
       $('.video:not(.all)').hide();
       $('.video:not(.all)').show();
       $('.video:not(.Gaming)').hide();
        },

        showhealthcare: function(){
        $('.video:not(.all)').hide();
        $('.video:not(.all)').show();
        $('.video:not(.Healthcare)').hide();
        },

        showholidays: function(){
        $('.video:not(.all)').hide();
        $('.video:not(.all)').show();
        $('.video:not(.Holidays)').hide();
        },

        showsports: function(){
        $('.video:not(.all)').hide();
        $('.video:not(.all)').show();
        $('.video:not(.Sports)').hide();
        },

        showpatriotic: function(){
        $('.video:not(.all)').hide();
        $('.video:not(.all)').show();
        $('.video:not(.Patriotic)').hide();
        },

        showretail: function(){
        $('.video:not(.all)').hide();
        $('.video:not(.all)').show();
        $('.video:not(.Retail)').hide();
        },

        showeducation: function(){
        $('.video:not(.all)').hide();
        $('.video:not(.all)').show();
        $('.video:not(.Education)').hide();
        },
        showmisc: function(){
        $('.video:not(.all)').hide();
        $('.video:not(.all)').show();
        $('.video:not(.Misc)').hide();
        },        
    },
        computed:{
    filteredItemList(){
      return this.itemList.filter((item) => {
        return item.name_short.toLowerCase().includes(this.keyword.toLowerCase());
      });
    },
  }
  });
  </script>
</body>
</html>

1 个答案:

答案 0 :(得分：0)

您需要将模型绑定到您的选择。然后，您可以将其用作href属性，如下所示：

<select :class='item.id' v-model='link'>
  <option :class='item.vidclass' :value="item.link1">{{item.name}} 1920x1080.mp4</option>
  <option :class='item.vidclass' :value="item.link2">{{item.name}} 1920x1080.wmv</option>
</select>
<a :href="link">Download</a>

请参阅docs

相关问题
最新问题