侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 129155 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

Vue.js - 0

2024-04-28 星期日 / 0 评论 / 0 点赞 / 3 阅读 / 3014 字

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Vue</title> </h

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
    <title>Vue</title>

</head>

<body>

    <div id="app" :style = "style">
      <p v-if="seen">{{ message }}</p>
      <p v-else>{{ message2 }}</p>
      <input v-model="message">
      
      <ol>
          <li v-for="element in list">
          {{element.text}}
          </li>
      </ol>
      <button v-on:click="oclick()">点击</button>
      
      <div @click="show($event)">点我</div>

      
    </div>


    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script type="text/javascript">
        var app = new Vue({
          el: '#app',
          data: {
            message: 'Hello Vue!',
            seen:true,
            list:[
                {text:'1111'},
                {text:'2222'},
                {text:'3333'}
            ],
            message2: 'I am else',
            style:{color:'red',fontSize:'30px'}
          },
          methods:{
              oclick:function(){
                  alert("testOnClick");
              },
              show:function(ev){
                alert(ev.clientX)
              }
          }          

        })
    </script>
</body>
</html>
 

广告 广告

评论区