v-text、v-html、v-bind、v-show
2024-09-24 18:47:26
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.myPink{color:pink;}
</style>
<script src="js/vue.js"></script>
</head>
<body>
<div id="container">
<p>{{msg}}</p>
<hr>
<h2>v-bind:绑定变量中的值给某属性</h2>
<img v-bind:src="'img/'+imgUrl" alt="">
<hr>
<a v-bind:href="myLink">百度</a>
<hr>
<h4 v-bind:style="{backgroundColor:myBGColor}">背景色</h4>
<button @click="changeBGColor">改色</button>
<hr>
<p v-bind:class="{myPink:isPink}">改变字体颜色</p>
<hr>
<button v-bind:disabled="!isDisabled">按钮</button>
</div>
<script>
new Vue({
el:"#container",
data:{
msg:"Hello VueJs",
imgUrl:"1.jpg",
myLink:"http://www.baidu.com",
myBGColor:"red",
isPink:false,
isDisabled:false
},
methods:{
changeBGColor:function(){
this.myBGColor = "pink";
}
}
})
</script>
</body>
</html>
最新文章
- PHP简介
- Atitti 跨语言异常的转换抛出 java js
- HTML5-Video & Audio
- 获取input标签的所有属性
- linux下安装php的swoole扩展模块（安装后php加载不出来？）
- vijosP1014 旅行商简化版
- Kafka单机版安装(CentOS 7环境下)
- 统计学常用概念：T检验、F检验、卡方检验、P值、自由度
- A窗口消失B窗口弹出
- vue-element-ui之弹窗重置
- js cookie 操作 封装
- HDU 5493 Queue 【线段树】
- VIP系统
- CSV表格融合
- Js学习(3) 数组
- 【LeetCode】数独
- Mybatis-Dao层开发之Mapper接口
- MySQL 5.6学习笔记（数据表基本操作）
- 【机器学习】主成分分析PCA（Principal components analysis）
- Django---简单from表单提交