1. 在 Vue 中可是使用 v-bind 对 html 中的 属性 进行绑定, 如下所示, 我们想给这个 a 标签绑定一个 title 值:

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

  <title>Vue Test</title>

</head>

<body>

    <div id="app">

        <!-- here -->

        <a href="#" v-bind:title="message">Fly me to the Moon.</a>

    </div>

    <script>

        var vApp = new Vue({

            el: "#app",

            data: {

                message: "Bart Howard"

            }

        })

    </script>

</body>

</html>

下面是预览情况:

2. 注意, 这里 v-bind:title="" 的引号内可以使用 js 表达式, 比如下面的三元运算表达式.

<div id="app">

    <a href="#" v-bind:title="lan === 'en' ? en : ch">Fly me to the Moon.</a>

</div>

<script>

    var vApp = new Vue({

        el: "#app",

        data: {

            lan: "ch",

            en: "Bart Howard",

            ch: "巴特·霍华德"

        }

    });

</script>

3. v-bind 可是简写为 : , 比如 v-bind:href 可是简写为 :href

怎样使用 v-bind 绑定 html 标签的属性值?的更多相关文章

  1. <mate>标签中属性/值的各个意思

    <mate>标签中属性/值的各个意思 HTML 4 name 属性 1.<mate name="author" content="" /> ...

  2. 正则表达式，提取html标签的属性值

    /** * 提取HTML标签的属性值 * @param source HTML标签内容 * "<a title=中国体育报 href=''>aaa</a><a ...

  3. 正值表达式匹配html标签的属性值

    今天由于工作的需求,需要获取html标签的属性值,立即想到了正则表达式,标签如下: <circle id="ap_test" cx="200" cy=&q ...

  4. SpringMVC(六)：@RequestMapping下使用@RequestHeader绑定请求报头的属性值、@CookieValue绑定请求中的Cookie值

    备注:我本地浏览器的报头(Request Header)信息如下: Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image ...

  5. 使用script创建标签添加属性值和添加样式

    <mark>使用script创建标签和给标签属性值以及样式的方法</mark><script> window.onload=function(){ var btn= ...

  6. selenium--更改标签的属性值

    前戏 在进行web自动化的时候,我们有时需要获取元素的属性,有时需要添加,有时需要删除,这时候就要通过js来进行操作了 实战 from selenium import webdriver import ...

  7. 在tomcat启动时解析xml文件，获取特定标签的属性值，并将属性值设置到静态变量里

    这里以解析hibernate.cfg.xml数据库配置信息为例,运用dom4j的解析方式来解析xml文件. 1.在javaWeb工程里新建一个java类,命名为GetXmlValue.java,为xm ...

  8. JSP动作标签flush属性值

    在JSP动作标签<jsp:include flush="true"/>,flush属性可以为true或false.flush默认值为false,当把flush属性赋值为 ...

  9. html标签默认属性值之margin;padding值

    一.h1~h6标签:有默认margin(top,bottom且相同)值,没有默认padding值. 在chrome中:16,15,14,16,17,19; 在firefox中:16,15,14,16, ...

随机推荐

  1. django 快速实现登陆，接着注册的项目写（五）

    1.改项目的urls.py from django.conf.urls import url,include from django.contrib import admin admin.autodi ...

  2. zookeeper系列（九）zookeeper的会话详解

    作者:leesf    掌控之中,才会成功:掌控之外,注定失败. 出处:http://www.cnblogs.com/leesf456/p/6103870.html尊重原创,大家共同学习: 一.前言 ...

  3. IDEA如何切换到括号外

    一般我们输入完括号后都会习惯性Enter或者Shift + Enter切换到括号外,结果却变成了: public void nothing() Enter → public void nothing( ...

  4. Leetcode题目206.反转链表（简单）

    题目描述: 反转一个单链表. 示例: 输入: 1->2->3->4->5->NULL 输出: 5->4->3->2->1->NULL 进阶: ...

  5. jwt token and shiro

    openapi可以完全开放访问,也可以使用jwt token进行简单的认证,还可以使用shiro支持更细致的权限管理. handler.yml配置了security和shiro两个handler: s ...

  6. 【零基础】简单说说一键果体APP的AI

    参考: https://www.jianshu.com/p/8c7a7cb7198c https://blog.csdn.net/gdymind/article/details/82696481 零. ...

  7. 2018-2019-2 20165330《网络对抗技术》Exp7 网络欺诈防范

    目录 基础问题 相关知识 实验目的 实验内容 实验步骤 实验中遇到的问题 实验总结与体会 实验目的 本实践的目标理解常用网络欺诈背后的原理,以提高防范意识,并提出具体防范方法. 返回目录 实验内容 简 ...

  8. HTTP之缓存技术

    1. 缓存简介 缓存是位于服务器和客户端的中间单元,主要根据用户代理发送过来的请求,向服务器请求相关内容后提供给用户,并保存内容副本,例如 HTML 页面.图片.文本文件或者流媒体文件.然后,当下一个 ...

  9. centos7修改默认启动模式（图形/命令行）

    centos7以后是这样的,7以前就是别的版本了 1.systemctl get-default命令获取当前模式 2.systemctl set-default graphical.target 修改 ...

  10. idea svn 主干分支切换

    使用快捷键ctrl+t或者点击工具栏中的 vcs update 出现如下窗口:点击复选框,在框2中进行选择你要切换的分支的地址,点击OK即可 : 查看是否切换成功可以再version control ...