怎样使用 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, ...
随机推荐
- Leetcode题目238.除自身以外数组的乘积（中等）
题目描述: 给定长度为 n 的整数数组 nums,其中 n > 1,返回输出数组 output ,其中 output[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积. 示例: ...
- Leetcode题目98.验证二叉搜索树（递归-中等）
题目描述: 给定一个二叉树,判断其是否是一个有效的二叉搜索树. 假设一个二叉搜索树具有如下特征: 节点的左子树只包含小于当前节点的数.节点的右子树只包含大于当前节点的数.所有左子树和右子树自身必须也是 ...
- socket.io 的使用
socket.io 是对 websocket 的封装,当你在客户端使用 socket.io 那么服务器也要对应的使用 目录结构: 使用方法: 客户端: socket.emit() 是提交数据,sock ...
- 性能测试 | 系统运行缓慢，CPU 100%，Full GC次数过多问题排查
处理过线上问题的同学基本上都会遇到系统突然运行缓慢,CPU 100%,以及Full GC次数过多的问题.当然,这些问题的最终导致的直观现象就是系统运行缓慢,并且有大量的报警.本文主要针对系统运行缓慢这 ...
- 记录一个微信网页授权中不小心踩到的坑（Curl请求返回false）
原文章地址在这里 这个问题是file_get_contents不能获取https的内容引起的.这样的情况下,我们一般会采用curl拓展来模拟请求. 代码demo(当然这是错误的示范): functio ...
- shift and add算法相关
1.超分辨率 非均匀插值 Farsiu S, Robinson D, Milanfar P. Robust shift and add approach to superresolution[J]. ...
- easyUI之Dialog（对话框窗口）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- 【原创smarty仿淘宝商品图片轮播+放大镜效果】
1.去掉图片集字段,字符串的多余字符 $goods_pic_display=$row[DISPLAY];$goods_pic_display1=str_replace('"', '', $g ...
- 单元测试unittest及报告生成（两种报告模板）
Python中有一个自带的单元测试框架是unittest模块,用它来做单元测试,它里面封装好了一些校验返回的结果方法和一些用例执行前的初始化操作. 在说unittest之前,先说几个概念: TestC ...
- JAVA 基础编程练习题11 【程序 11 求不重复数字】
11 [程序 11 求不重复数字] 题目:有 1.2.3.4 个数字,能组成多少个互不相同且无重复数字的三位数?都是多少? 程序分析:可填在百位.十位.个位的数字都是 1.2.3.4.组成所有的排列后 ...