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. Leetcode题目200.岛屿数量（BFS+DFS+并查集-中等）

    题目描述: 给定一个由 '1'(陆地)和 '0'(水)组成的的二维网格,计算岛屿的数量.一个岛被水包围,并且它是通过水平方向或垂直方向上相邻的陆地连接而成的.你可以假设网格的四个边均被水包围. 示例 ...

  2. redis事务机制和分布式锁

    Redis事务机制 严格意义来讲,Redis的事务和我们理解的传统数据库(如mysql)的事务是不一样的:Redis的事务实质上是命令的集合,在一个事务中要么所有命令都被执行,要么所有事物都不执行.  ...

  3. VMware配置NAT方式下的静态ip

    一.VMware上NAT模式工作原理 原理图如下: 说明: 1.虚拟主机与本地主机通信时,直接通过虚拟交换机访问(不管是虚拟主机的ip是静态ip还是动态分配的ip) 2.虚拟主机与外网通信时,虚拟主机 ...

  4. 阿里云AHAS应用高可用服务初体验

    AHAS是阿里云提供的应用高可用服务(Application High Availability Service)产品. 高可用这个关键词可以说是互联网及软件开发行业热度一直很高的词语了,阿里云推出的 ...

  5. mac安装phpmysql

    1.百度搜“phpmadmin”,还是一样,第二个因为是PC版本,不能用,点击第一个连接,去phpmyadmin的官网. 2.下载完毕后,进入到下载文件保存目录,双击压缩包,压缩包则会自动解压. 3. ...

  6. Mysql查询某字段重复值并删除重复值

    1.查询重复值: select code,count(*) as count from hospital group by code having count>1; 该语句查询code重复值大于 ...

  7. [go]mysql使用

    mysql驱动使用 初始化 import ( "database/sql" _ "github.com/go-sql-driver/mysql" ) DB, e ...

  8. python之scrapy模块logging日志

    1.知识点 """ logging : scrapy: settings中设置LOG_LEVEL="WARNING" settings中设置LOG_F ...

  9. C#.net winform skin 皮肤大全

    C#.net winform skin 皮肤大全 1. 东日IrisSkin IrisSkin 共有两个版本,一个是IrisSkin.dll 用于.Net Framework1.0/1.1 和Iris ...

  10. C# 批处理制作静默安装程序包

    使用批处理+WinRAR制作静默安装程序包 @echo 安装完窗口会自动关闭!!! @echo off start /wait Lync.exe /Install /Silent start /wai ...