zoukankan      html  css  js  c++  java
  • VUE学习二,绑定元素v-bind

    指令带有前缀 v-,以表示它们是 Vue 提供的特殊 attribute。它们会在渲染的 DOM 上应用特殊的响应式行为。

    一、示范代码

    <div id="app-2">
      <span v-bind:title="message">
        鼠标悬停几秒钟查看此处动态绑定的提示信息!
      </span>
    </div>
    var app2 = new Vue({
      el: '#app-2',
      data: {
        message: '页面加载于 ' + new Date().toLocaleString()
      }
    })

    二、结果如下图所示

    三、如果在控制台修改app2.message的值,则绑定同时更新

    四、全部代码如下

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>VUE简单示范</title>
    <script type="text/javascript" src="../js/vue.min.js" charset="utf-8"></script>
    </head>
    <body>
    <!--v-bind attribute 被称为指令。指令带有前缀 v-,以表示它们是 Vue 提供的特殊 attribute//-->
    <!--控制台,输入 app2.message = '新消息',就会再一次看到这个绑定了 title attribute 的 HTML 已经进行了更新。//-->
    <div id="app-2">
      <span v-bind:title="message">
        鼠标悬停几秒钟查看此处动态绑定的提示信息!
      </span>
    </div>
    
    <script>
    var app2 = new Vue({
      el: '#app-2',
      data: {
        message: '页面加载于 ' + new Date().toLocaleString()
      }
    })
    </script>
    </body>
    </html>
    View Code

    本文参考:

    https://cn.vuejs.org/v2/guide/

  • 相关阅读:
    java.lang.ArrayIndexOutOfBoundsException异常分析及解决
    Android_开发片段(Part 2)
    保存错误日志回传服务器之回传错误“信息文件”
    node.js
    拼接json
    CommonJS / Node.js/ Vue学习资料
    合并PDF
    java 多线程
    linux 运行jar包
    mvn 命令
  • 原文地址:https://www.cnblogs.com/nayitian/p/14983183.html
Copyright © 2011-2022 走看看