4 vue之属性指令
1 属性指令
#只要是标签的属性，都可以使用属性指令动态绑定
# v-bind:属性名=属性值
# :属性名=属性值
2 案例
v-bind:class='js变量' 可以缩写成：:class='js变量'
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性指令title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js">script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js">script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js">script>
<style>
.red {
color: red;
}
.green {
color: green;
}
style>
head>
<body>
<div id="app">
<div v-bind:class="my_red">v-binddiv>
<div :class="my_green">推荐使用 :div>
div>
body>
<script>
var vm = new Vue({
el: '#app',
data: {
my_red: 'red',
my_green: 'green'
},
methods: {}
})
script>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="./js/vue.js">script>
head>
<body>
<div class="app">
<h1>只要是标签的属性，都可以使用属性指令动态绑定h1>
<span id="id_span" v-bind:name="name">我是spanspan>
<hr>
<span id="id_span2" :name="name">我是span222span>
<hr>
<a :href="url">点我好看a> //点一下会跳转
<hr>
<img :src="src" alt="">
div>
body>
<script>
var vm=new Vue({
el:'.app',
data:{
name:'lqz',
url:'http://www.baidu.com',
src:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.huabanimg.com%2Ff8f343e8f16c55ee489da60bfca7cd0ceb01bfd0a98a-ixSNbV_fw658&refer=http%3A%2F%2Fhbimg.huabanimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647048281&t=acb541b86473f0b910fae0ee787228f2'
}
})
script>
html>