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. docker安装Elasticsearch Kibana和Cerebro

    环境:win10家庭版,基于Docker Toolbox 首先先做好以下两步准备工作: ①.打开Oracle VM VirtualBox,设置虚拟机内存大小,默认不够安装,建议如下设置: ②.启动虚拟 ...

  2. Leetcode题目155.最小栈（简单）

    题目描述: 设计一个支持 push,pop,top 操作,并能在常数时间内检索到最小元素的栈. push(x) -- 将元素 x 推入栈中.pop() -- 删除栈顶的元素.top() -- 获取栈顶 ...

  3. 2018-2019-2 20175226王鹏雲 实验四《Android程序设计》实验报告

    2018-2019-2 20175226王鹏雲 实验四<Android程序设计>实验报告 实验报告封面 课程:Java程序设计 班级:1752班 姓名:王鹏雲 学号:20175226 指导 ...

  4. centOS7搭建hadoop，zookeeper，hbase

    1.配置ssh免密登录 (本人使用的是centOS7虚拟机) (本人未在root用户下安装,建议使用root用户,不然很麻烦!!) ① 本机无密钥登录 1.进入~/.ssh目录(若无,则执行一次ssh ...

  5. CentOS7 上搭建 CDH（6.3.0）

    这里以四台节点搭建 IP HostName OS 192.168.8.5 h5(主) CentOS 7.5 192.168.8.6 h6(从) CentOS 7.5 192.168.8.7 h7(从) ...

  6. [实战]扩展一个定制的sentinel JdbcDataSource

    Sentinel是今年阿里开源的高可用防护的流量管理框架. git地址:https://github.com/alibaba/Sentinel wiki:https://github.com/alib ...

  7. MS SQL 数据类型转换

    MS SQL 转换数据类型 select cast(列A as int) 列A select convert(int,列A) 列A --转字符串为int select len(ltrim(str('数 ...

  8. python之scrapy爬取jingdong招聘信息到mysql数据库

    1.创建工程 scrapy startproject jd 2.创建项目 scrapy genspider jingdong 3.安装pymysql pip install pymysql 4.set ...

  9. python之scrapy爬取某集团招聘信息

    1.创建工程 scrapy startproject gosuncn 2.创建项目 cd gosuncn scrapy genspider gaoxinxing gosuncn.zhiye.com 3 ...

  10. springboot自定义filter获取spring容器bean对象

    今天在自己定义的filter中,想要直接注入spring容器的其它bean进行操作,发现不能正常的注入: 原因:web容器加载顺序导致, 加载顺序是listener——filter——servlet, ...