1.Vue 中可是使用 v-bindhtml 中的 属性 进行绑定, 如下所示, 我们想给这个 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. 手把手教你在Linux系统下安装MongoDB

    1. 下载最新的stable版MongoDB [root@spirit-of-fire ~]# wget http://downloads.mongodb.org/linux/mongodb-linu ...

  2. Qt VS MFC

    最近用了一段时间Qt,觉得网上这篇文章讲述Qt与MFC之间的区别很到位,分享一下. ----------------------------------原文---------------------- ...

  3. Go语言中new和make的区别

    Go语言中new跟make是内置函数,主要用来创建分配类型内存. new( ) new(T)创建一个没有任何数据的类型为T的实例,并返回该实例的指针: 源码解析 func new func new(T ...

  4. Flutter移动电商实战 --(13)ADBanner组件的编写

    1.AdBanner组件的编写 我们还是把这部分单独出来,需要说明的是,这个Class你也是可以完全独立成一个dart文件的.代码如下: 广告图片 class AdBanner extends Sta ...

  5. sklearn——train_test_split 随机划分训练集和测试集

    sklearn——train_test_split 随机划分训练集和测试集 sklearn.model_selection.train_test_split随机划分训练集和测试集 官网文档:http: ...

  6. linux下的开源NFC协议栈

    1. 协议栈名称 neardal 2. 源码 https://github.com/connectivity/neardal.git 3. 由谁维护? intel 4. 基于neardal的nfc协议 ...

  7. python3.6 列表推导式学习

    a=[i for i in range(1,10) if i%2==0]print(a)c=[(x,y) for x in range(5) if x%2==0 for y in range(5) i ...

  8. solr简单学习---1

    *服务器配置略,比较复杂,看视频 1.导入jar包 package cn.itcast.solr; import org.apache.solr.client.solrj.SolrServer; im ...

  9. 扩展:Zero Copy

  10. Swift 3.0 闭包的定义和使用

    // // ViewController.swift // 闭包的定义和使用 // // Created by 思 彭 on 16/9/17. // Copyright © 2016年 思 彭. Al ...