Vue3单一网页代码练习

wjf63000

于 2024-07-11 15:50:57 发布

阅读量101

点赞数 1

分类专栏： Vue javascript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_41422954/article/details/140354264

版权

Vue 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

javascript

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <table>
        <tr v-for="(item, index) in alist">
            <td>{{item.title}}</td><td>{{item.content}}</td><td><button>编辑</button><button>删除</button></td>
        </tr>
      </table>

      <a :href="url">黑马程序员</a>

        手链的价格为：<span v-if="customer[0].level>2">9.9</span>        

        <br></br>
        <button v-on:click="money">点我有惊喜</button> &NonBreakingSpace;
        
        <!-- 这是一个 HTML 注释 -->
        
        <!-- v-on:  可以用 @ 替代 -->

        <button @click="more">有更多惊喜</button>

        <br></br>

        输入目录：<input type='text' v-model="searchconditon.cate"/><span>{{searchconditon.cate}}</span>
        <br></br>
        内容：<input type='text' v-model="searchconditon.content"/><span>{{searchconditon.content}}</span>
        <br></br>
        <button @click="clear">清空2个框中的内容</button>

      </div>
<script type="module">

import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

const app = createApp({
  data() {
    return {
      url:"https://www.itheima.com/",
      count:0,
      alist:[
      {title:'我测试1',content:"1111"},
      {title:'我测试2',content:"2222"},
      {title:'我测试3',content:"3333"}
    ],
    customer:[
        {name:"张三",level:5}
    ],
    searchconditon:{
        cate:'',
        content:''
    }
    }
  },
  methods: {
    money:function(){alert("送你100元。")},
    more:function(){alert("爱你一万年！")},
    //
    clear:function(){
        this.searchconditon.cate='',
        this.searchconditon.content=''
    }
  },
  
  mounted() {
    console.log("Vue挂载完成，发送请求获取数据")
    
  },

})

app.mount('#app')

</script>

</body>
</html>