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/

  • 相关阅读:
    1093. Count PAT's (25)
    1092. To Buy or Not to Buy (20)
    机器学习实战——k-邻近算法:约会网站
    1057. Stack (30)
    1017. Queueing at Bank (25)
    strcpy、strncpy和memcpy的用法比较
    华为笔试题--蛇形矩阵
    对于内核执行过程的理解
    pom.xml格式问题
    Json反序列化遇到的问题
  • 原文地址:https://www.cnblogs.com/nayitian/p/14983183.html
Copyright © 2011-2022 走看看