zoukankan      html  css  js  c++  java
  • vue初始化模板套用

    一、

    代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            {{data}}
        </div>
        <script>
            var app = new Vue({
                el: "#app",
                data: {
                    data: "这是测试",
                    info: "none"
                },
                beforeCreate() {
                    console.log("创建前=======");
                    console.log(this.data);
                    console.log(this.$el);
                    console.log("这是一条分割线==========");
                },
                created() {
                    console.log("已创建=========");
                    console.log(this.data);
                    console.log(this.$el);
                    console.log("这是一条分割线==========");
                },
                beforeMount() {
                    console.log("mount之前==========");
                    console.log(this.info);
                    console.log(this.$el);
                    console.log("这是一条分割线==========");
                },
                mounted() {
                    console.log("mounted======");
                    console.log(this.info);
                    console.log(this.$el);
                    console.log("这是一条分割线==========");
                },
                beforeUpdate() {
                    console.log("更新前=========");
                    console.log("这是一条分割线==========");
                },
                updated() {
                    console.log("更新完成=======");
                    console.log("这是一条分割线==========");
                },
                beforeDestroy() {
                    console.log("销毁前========");
                    console.log(this.info);
                    console.log(this.$el);
                    console.log("这是一条分割线==========");
                },
                destroyed() {
                    console.log("已销毁=========");
                    console.log(this.info);
                    console.log(this.$el);
                    console.log("这是一条分割线==========");
                },
            })
        </script>
    </body>
    </html>

     循环渲染

          <div id="myData">
            {{userModel.type}}
            <template v-for="value in userModel.data">
              <template v-if="userModel.type=='No_House_Holder'">
                输出值{{value["ctime"]}}
                
              </template>
    
              <template v-else-if="userModel.type=='House_Holder'">输出值{{value["ctime"]}}</template>
    
              <template v-else>输出值{{value["ctime"]}}</template>
            </template>
          </div>
  • 相关阅读:
    HTML 5 全局属性
    微软build 2015
    写个程序登陆58同城
    工厂方法
    简单工厂
    System.Data.SQLite兼容32位和64位问题
    利用Socket实现的两个程序的通信
    最近的工作总结
    Canvas路径、描边、填充
    HTML5阴影与渐变
  • 原文地址:https://www.cnblogs.com/fger/p/12638456.html
Copyright © 2011-2022 走看看