sbc11

day8

Vue学习

点击查看代码 
<html>
  <head>
    <title>Vue-入门</title>
    <script src="index.jsp"></script>
  </head>
  <body>
  <div id="app">
    <a v-bind:href="url">连接1</a>
    <a :href="url">连接2</a>

  </div>
  </body>
<script>
  new Vue({
    el:"#app",
    date :{
      url:"https://www.bilibili.com"
    }
  })
</script>
</html>
点击查看代码 
<html>
  <head>
    <title>Vue-入门</title>
    <script src="index.jsp"></script>
  </head>
  <body>
  <div id="app">
    <input type="button" value="点击" v-on:click="handle()">
    <input type="button" value="点击" @click="handle()">
    
  </div>
  </body>
<script>
  new Vue({
    el:"#app",
    date :{

    },
    method:{
      handle:function (){
        alert("点我");
      }
    }
  })
</script>
</html>

点击查看代码 
<html>
  <head>
    <title>Vue-入门</title>
    <script src="index.jsp"></script>
  </head>
  <body>
  <div id="app">
    年龄<input type="text" v-model="age">经判定，为：
    <span v-if="age <=35">年轻人（35及以下）</span>
    <span v-else-if ="age >35&&age<60">中年人</span>
    <span v-else>老年人（60及以上）</span>

    年龄<input type="text" v-model="age">经判定，为：
    <span v-show="age <=35">年轻人（35及以下）</span>
    <span v-show ="age >35&&age<60">中年人</span>
    <span v-show>老年人（60及以上）</span>
  </div>
  </body>
<script>
  new Vue({
    el:"#app",
    date :{
      age:20
    },
    method:{

    }
  })
</script>
</html>

点击查看代码 
<html>
  <head>
    <title>Vue-入门</title>
    <script src="index.jsp"></script>
  </head>
  <body>
  <div id="app">
    <div v-for="(addr,index) in addrs">{{addr}}</div>
  </div>
  </body>
<script>
  new Vue({
    el:"#app",
    date :{
      addrs:["北京","上海","西安","成都","深圳"]
    },
    method:{

    }
  })
</script>
</html>

Vue生命周期

posted on 2025-01-25 15:11  沈八才11  阅读(8)  评论(0)    收藏  举报

导航