zoukankan      html  css  js  c++  java
  • Vue学习一:{{}}html模板使用方法

    本文为博主原创,未经允许不得转载:

      之前自学了vue,在项目中应用了vue,由于是第一次使用,感觉非常强大,使用也非常方便,趁有时间,总结一下vue学习过程中

    各个指令的使用方法,只要掌握了vue的指令,就能熟练使用vue。

    以下为HTML模板{{ }}的使用方法:

    <!DOCTYPE html>
    <html lang="zh">
    <head>
    <script src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script>
    </head>
        <body>
            <div id="app" >
                <!--
                    {{ }}为HTML模板,用于输出对象属性和函数返回值,
                    里面不仅可以写js变量,
                    还可以写一些简单的表达式,比如三目运算符,累加等等,
                    当里面写方法的时候,必须要在vue中申明
                -->
                <!--{{age>60 ? "老人":"年轻人"}}-->
                <!--{{fullName.split(" ")[1]}}-->
                {{getFullName()}}
            </div>
            <script>
                /**
                 * 每个 Vue 应用都需要通过实例化 Vue 来实现。
                 */
                var vm = new Vue({
                    /*  el:用于绑定属性的元素 */
                    el:"#app",  //
    //data 用于定义属性,
    data:{ msg:"hello world!!", age: 30, firstName : "liu234", lastName : "luw3111i", fullName : "luwei 6" }, /* 用于定义的函数,可以通过 return 来返回函数值。*/ methods : { getFullName : function(){ //this指vm实例 return this.firstName + "" + this.lastName } } }) </script> </body> </html>

    使用效果:

  • 相关阅读:
    .NET 2.0 WinForm Control DataGridView 编程36计(一)
    Sql Server 日期格式化函数
    FastReport 金额大小写转换自定义函数
    vue.js 三种方式安装(vuecli)
    Android style
    android ui 布局性能优化
    android 手机分辨率
    TCP,IP,HTTP,SOCKET区别和联系
    android2.2 特性
    常见开放api平台OpenAPI
  • 原文地址:https://www.cnblogs.com/zjdxr-up/p/9083950.html
Copyright © 2011-2022 走看看