怎样使用 v-bind 绑定 html 标签的属性值?
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 标签的属性值?的更多相关文章
- <mate>标签中属性/值的各个意思
<mate>标签中属性/值的各个意思 HTML 4 name 属性 1.<mate name="author" content="" /> ...
- 正则表达式，提取html标签的属性值
/** * 提取HTML标签的属性值 * @param source HTML标签内容 * "<a title=中国体育报 href=''>aaa</a><a ...
- 正值表达式匹配html标签的属性值
今天由于工作的需求,需要获取html标签的属性值,立即想到了正则表达式,标签如下: <circle id="ap_test" cx="200" cy=&q ...
- SpringMVC(六)：@RequestMapping下使用@RequestHeader绑定请求报头的属性值、@CookieValue绑定请求中的Cookie值
备注:我本地浏览器的报头(Request Header)信息如下: Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image ...
- 使用script创建标签添加属性值和添加样式
<mark>使用script创建标签和给标签属性值以及样式的方法</mark><script> window.onload=function(){ var btn= ...
- selenium--更改标签的属性值
前戏 在进行web自动化的时候,我们有时需要获取元素的属性,有时需要添加,有时需要删除,这时候就要通过js来进行操作了 实战 from selenium import webdriver import ...
- 在tomcat启动时解析xml文件，获取特定标签的属性值，并将属性值设置到静态变量里
这里以解析hibernate.cfg.xml数据库配置信息为例,运用dom4j的解析方式来解析xml文件. 1.在javaWeb工程里新建一个java类,命名为GetXmlValue.java,为xm ...
- JSP动作标签flush属性值
在JSP动作标签<jsp:include flush="true"/>,flush属性可以为true或false.flush默认值为false,当把flush属性赋值为 ...
- html标签默认属性值之margin;padding值
一.h1~h6标签:有默认margin(top,bottom且相同)值,没有默认padding值. 在chrome中:16,15,14,16,17,19; 在firefox中:16,15,14,16, ...
随机推荐
- 预处理、const、static与sizeof-使用宏定义得到一个数组所含的元素个数
1:代码如下: #define ARR_SIZE(a) (sizeof((a)) / sizeof((a[0])))
- Netfilter 之 钩子函数与钩子点关系图
概述 通过钩子点和优先级的代码追溯,得到如下对应关系图,图中横坐标为钩子点,纵坐标为优先级,每个钩子点上的钩子函数按照优先级排布: 详细分析 5个钩子点如下所示,在这个五个钩子点上的钩子函数按照上面的 ...
- antd源码分析之——栅格（Grid）
官方文档 https://ant.design/components/grid-cn/ 目录 一.antd中的Grid 代码目录 1.整体思路 2.less文件结构图(♦♦♦重要) 3.less实现逻 ...
- java代理浅述
代理 代理主要可以分为: 静态代理 JDK自带的动态代理 Cglib 静态代理 静态代理比较简单,简单来说就是不想直接调用被代理类,通过代理类来实现功能.如下就是使用了静态代理 定义接口 public ...
- ScreenShot 截图工具类
import android.app.Activity; import android.graphics.Bitmap; import android.graphics.Rect; import an ...
- Python3+RobotFramewok 用户自定义库的开发（四）
在介绍这个之前,可以先看下python的目录Python\Lib\site-packages下面的文件夹,你会发现这个目录下面有DatabaseLibrary.RequestsLibrary.Sele ...
- 两个input之间有空隙，处理方法
修改css,给前边一个input添加一个左浮动. <input id="day" type="button" value="日" ...
- Python实现计算圆周率π的值到任意位的方法示例
Python实现计算圆周率π的值到任意位的方法示例 本文实例讲述了Python实现计算圆周率π的值到任意位的方法.分享给大家供大家参考,具体如下: 一.需求分析 输入想要计算到小数点后的位数,计算圆周 ...
- Spring MVC的多视图解析器配置及与Freemarker的集成
一.从freemarker谈起 Freemarker使用模板技术进行视图的渲染.自从看了Struts标签.Freemarker.JSTL的性能对比后,我毅然决定放弃Struts标签了!效率太差…… S ...
- elk收集tomcat的日志
logstash收集tomcat的日志 不要修改下tomcat中server.xml的日志格式,否则tomcat无法启动,试过多次,不行,就用自带的日志让logstash去收集 首先给tomcat日志 ...