Vue的练习页面

最新推荐文章于 2024-06-05 20:43:04 发布

liukai6

最新推荐文章于 2024-06-05 20:43:04 发布

阅读量888

点赞数

分类专栏：前端 js 函数模板

本文链接：https://blog.csdn.net/liukai6/article/details/79802670

版权

前端同时被 3 个专栏收录

101 篇文章 1 订阅

订阅专栏

78 篇文章 1 订阅

订阅专栏

函数模板

25 篇文章 0 订阅

订阅专栏

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
    <div id="app">
      电影名称: {{ name }}
      上映时间: {{ date }}
      <span v-bind:title="message">鼠标显示</span>
      <h1 v-if="seen">现在我是看不到的</h1>
      <h3 v-for="item in items">{{item.title}}</h3>
      <p>{{message}}</p>
      <button v-on:click="reverseMessage">逆转消息</button>
      <P>{{text}}</P>
      <input v-model="text">
      <ol>
        <todo-item
          v-for="item in datas"
          v-bind:todo="item"
          v-bind:key="item.id">
        </todo-item>
      </ol>
    </div>
    <!-- built files will be auto injected -->
    <script>


      var vue = new Vue({
        el: "#app",
        data:
          {
            text: "",
            name: "泰坦尼克号",
            date: '1990',
            message: "awd awdaw dawd",
            seen: false,
            items: [
              {"title": "及那天主题是啥呢"},
              {"title": "做一个有脾气的人"},
              {"title": "每个人生活的豆不容易"}
            ],
            datas: [
              { id: 0, text: '蔬菜' },
              { id: 1, text: '奶酪' },
              { id: 2, text: '随便其它什么人吃的东西' }
            ]
          }
        ,
        methods: {
          reverseMessage: function () {
            this.message = this.message.split('').reverse().join('')
          }
        }

      })
      Vue.component('todo-item',{
        props: ['todo'],
        template: "<li>{{todo.text}}</li>"
      })
    </script>
  </body>

</html>

liukai6

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue的练习页面

&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="width=device-width,initial-scale=1.0"&gt; &lt;title&gt;vue&lt;/title&gt;
复制链接

扫一扫

专栏目录