“Vue v-bind 指令”的版本间的差异
跳到导航
跳到搜索
Jihongchang(讨论 | 贡献) |
Jihongchang(讨论 | 贡献) |
||
第23行: | 第23行: | ||
} | } | ||
}) | }) | ||
+ | </syntaxhighlight><syntaxhighlight lang="html"> | ||
+ | <!DOCTYPE html> | ||
+ | <html lang="en"> | ||
+ | |||
+ | <head> | ||
+ | <meta charset="UTF-8"> | ||
+ | <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
+ | <meta http-equiv="X-UA-Compatible" content="ie=edge"> | ||
+ | <title>v-bind指令</title> | ||
+ | <style> | ||
+ | .active { | ||
+ | border: 1px solid red; | ||
+ | } | ||
+ | </style> | ||
+ | </head> | ||
+ | |||
+ | <body> | ||
+ | <div id="app"> | ||
+ | <img v-bind:src="imgSrc" alt=""> | ||
+ | <br> | ||
+ | |||
+ | <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" | ||
+ | :class="isActive?'active':''" @click="toggleActive"> | ||
+ | |||
+ | <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" | ||
+ | :class="{active:isActive}" @click="toggleActive"> | ||
+ | </div> | ||
+ | <!-- 开发环境版本,包含了有帮助的命令行警告 --> | ||
+ | <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> | ||
+ | <script> | ||
+ | var app = new Vue({ | ||
+ | el: "#app", | ||
+ | data: { | ||
+ | imgSrc:"https://www.jihongchang.top/resources/assets/logo.png", | ||
+ | imgTitle:"hello world", | ||
+ | isActive: false | ||
+ | }, | ||
+ | methods: { | ||
+ | toggleActive:function(){ | ||
+ | this.isActive = !this.isActive; | ||
+ | } | ||
+ | } | ||
+ | }) | ||
+ | </script> | ||
+ | </body> | ||
+ | </html> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
+ | |||
+ | * <u>v-bind</u> 指令的作用是:为元素绑定属性 | ||
+ | * 完整的写法是 <u>v-bind:属性名</u> |
2023年6月9日 (五) 03:34的版本
https://www.bilibili.com/video/BV12J411m7MG/?p=13
设置元素的属性(比如:src,title,class)
<div id="app">
<img v-bind:src="imgSrc">
<img v-bind:title="imgTitle + '!!!'">
<img class="active">
<img v-bind:class="isActive?'active':''">
<img v-bind:class="{active:isActive}">
<img :src="imgSrc">
<img :title="imgTitle + '!!!'">
<img :class="isActive?'active':''">
<img :class="{active:isActive}">
</div>
var app = new Vue({
el:"#app",
data:{
imgSrc:"图片地址",
imgTitle:"hello world",
isActive:false
}
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-bind指令</title>
<style>
.active {
border: 1px solid red;
}
</style>
</head>
<body>
<div id="app">
<img v-bind:src="imgSrc" alt="">
<br>
<img :src="imgSrc" alt="" :title="imgTitle+'!!!'"
:class="isActive?'active':''" @click="toggleActive">
<img :src="imgSrc" alt="" :title="imgTitle+'!!!'"
:class="{active:isActive}" @click="toggleActive">
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
imgSrc:"https://www.jihongchang.top/resources/assets/logo.png",
imgTitle:"hello world",
isActive: false
},
methods: {
toggleActive:function(){
this.isActive = !this.isActive;
}
}
})
</script>
</body>
</html>
- v-bind 指令的作用是:为元素绑定属性
- 完整的写法是 v-bind:属性名