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/

  • 相关阅读:
    Servlet 06: jar包引入和web配置文件创建
    Servlet 05: Servlet生命周期方法
    Servlet 04: 什么是重定向
    Servlet 03: 通过xml配置文件配置servlet访问路径
    080 面向过程编程
    079 内置函数
    078 匿名函数
    077 递归
    076 生成器
    075 字典生成式
  • 原文地址:https://www.cnblogs.com/nayitian/p/14983183.html
Copyright © 2011-2022 走看看