Vue.js初步入门

最新推荐文章于 2024-06-26 09:30:20 发布

z_w_c_小文

最新推荐文章于 2024-06-26 09:30:20 发布

阅读量879

点赞数

分类专栏： html/Javascript/Jquery

本文链接：https://blog.csdn.net/zwc2xm/article/details/52473289

版权

html/Javascript/Jquery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<script type="text/javascript" src="vue.js"></script>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
</head>
<body>
       <!--  <ul id = "id_test">
        	<a href="withdrawal.html"><li class="pl_list_d"><i class="t_2"></i>提现<></a>
                <a href="orderhistory.html"><li class="b_r4_top"><i class="t_3"></i>资金流水<></a>
                <a href="dealhistory.html"><li class="pl_list_d b_r4_bottom"><i class="t_4"></i>交易历史<></a>
                <a href="tikets.html"><li class="b_r4_top"><i class="t_5"></i>我的体验券<></a>
                <a href="trading_rules.html"><li><i class="t_6"></i>了解微盘<></a>
                <a href="../brokerlogin.html"><li class="pl_list_d b_r4_bottom"><i class="t_11"></i>经纪人平台<></a>
                <a href="newlist.html"><li class="b_r4_top"><i class="t_7"></i>公告<></a>
                <a href="personInfo.html"><li class="b_r4_bottom"><i class="t_10"></i>个人资料<></a>
        </ul> -->

         <ul id = "id_test" >
                <a v-for="item in arr_item" href="{{ item.href }}">
                        <li class = "{{ item.li }}"> 
                                <i class = "{{ item.i }}"></i> {{ item.text }}<>
                        </li>
                </a>
        </ul>
        <template v-if="show">
                <a  v-on:click="clickZhongguo"> {{ spanData }} </a>
        </template>
        <template v-else>
                 <a  v-on:click="clickWaiguo"> {{ spanData2 }} </a>
        </template>

<script type="text/javascript">

var Data = {
    arr_item: [
      {href : 'withdrawal.html', li : 'pl_list_d', i : "t_2" , text : "提现" },
      {href : 'orderhistory.html', li : 'b_r4_top', i : "t_3" , text : "资金流水" },
      {href : 'dealhistory.html', li : 'pl_list_d b_r4_bottom', i : "t_4" , text : "交易历史" },
    ],
    show : 0, //非0即真
    spanData : "中国人",
    spanData2 : "外国人",
  }    

var Method = {
        clickZhongguo : function(event){
                alert("你点击了中国人")
        },
        clickWaiguo : function(event){
                alert("你点击了外国人")
        }
}    

new Vue({
  el: 'body',
  data: Data,
  methods: Method
})

</script>
 
</body>
</html>