指令的目的是做什么: 操作DOM
解释 : MVVM vm -> v 数据驱动
1. v-html 转义输出,也就是可以解析 xml 数据
2. v-text: 非转义输出,也就是无法解析 xml 类型数据
3. v-bind
- 将数据和属性进行单向数据绑定: 将vue中数据赋值给属性值
<img v-bind:src = "src" />
<div v-bind:class = "">
</div>
<div v-bind:style = "">
</div>
简写形式
<img v-bind:src="src" alt="">
<img :src="src" alt="">
1. - 类名绑定
- 用法
- 对象形式用法
<p :class = "{ bg: true,size: true }"></p>
<p :class = "{ bg: true,size: false }"></p>
<p :class = "{ [classA]: true,[classB]: true }"></p>
- 数组形式用法
<p :class = "[ 'size','bg' ]"></p>
<p :class = "[ classA,classB ]"></p>
<p :class = "[ classA,classB,5>3?'a':'b']"> </p>
2 - 样式绑定
- 用法
- 对象形式用法
<p :style = "{width: '100px',height: '100px',background: 'yellow'}"></p>
<p :style = "styleObj"></p>
- 数组形式用法
<p :style = "[{width:'100px',height: '100px'},{ background: 'green'}]"></p>
<p :style = "[size,bg]"></p>
vue 指令
最新推荐文章于 2023-01-10 14:55:13 发布