Vue中的v-bind -- 转载

最新推荐文章于 2024-07-05 11:27:33 发布

后端小哥_哈哈

最新推荐文章于 2024-07-05 11:27:33 发布

阅读量300

点赞数

分类专栏： Vue 文章标签： vue

原文链接：https://blog.csdn.net/weixin_34727238/article/details/106949433

版权

Vue 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

Vue中的v-bind -- 转载

Mastache语法（即{{msg}}这样的格式）不能作用于HTML特性上，遇到这种情况应该去使用v-bind指令

v-bind:属性 = “(在vue中要用的变量名字)”

例子：

<div v-bind:id="dynamicId"> 本div的id是vue决定的哈哈<div>

对于布尔特性，它比较特殊，他们只要存在就意味着值为true，v-bind:disabled使用要特别注意下

<button v-bind:disabled = "isButtonDisabled">我是被vue控制的按钮</button>

上面的代码中，如果isButtonDisabled的值是null、undefined或者false，disabled特性甚至不会被包含在渲染出来的元素中。

补充:disabled属性设置为true生效。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>插值之原始HTML</title>
	<script src="vue.js"></script>
</head>
<body>
	<div id="app">
		<div v-bind:class ="color">我是被vue控制的颜色属性</div>
		<button v-bind:disabled = "isButtonDisabled">我是被vue控制的按钮</button>
	</div>
	<script>
		var vm = new Vue({
			el: "#app",
			data: {
				color: 'skyblue',
				isButtonDisabled: false,
			}
		});
	</script>
</body>
<style>
  .red{color:red;}
  .skyblue{color:skyblue;}
</style>
</html>

这段代码的运行结果是
在这里插入图片描述 button仍可点击，当将isButtonDisabled的值改为 true时，则按钮变灰，不可点击。

后端小哥_哈哈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中的v-bind -- 转载

Vue中的v-bind -- 转载Mastache语法（即{{msg}}这样的格式）不能作用于HTML特性上，遇到这种情况应该去使用v-bind指令v-bind:属性 = “(在vue中要用的变量名字)”例子：<div v-bind:id="dynamicId"> 本div的id是vue决定的哈哈<div>对于布尔特性，它比较特殊，他们只要存在就意味着值为true，v-bind:disabled使用要特别注意下<button v-bind:disabled = "
复制链接

扫一扫

专栏目录