目录
vue中的指令按照不同的用途可以分为如下6大类:
内容渲染指令
、
属性绑定指令
、
事件绑定指令
、
双向绑定指令
、
条件渲染指令
和
列表渲染指令
。
内容渲染指令(v-text、v-html)
v-text 指令(更新元素的文本内容。如果要更新部分的文本内容,需要使用 {
{ }}
插值。)、v-html 指令(更新元素的 innerHTML。注意:内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译)。
<div id="app">
<!-- 默认写法会替换所有内容,使用插值表达式{
{
}}可以替换指定内容 -->
<!-- 注意:v-text、v-html都会将所有的文本值用获得的数据替换掉,v-text也可进行字符串的拼接操作 -->
<h3 v-text="message + '呀!'">柳小姐</h3> //你好呀!
<h3>{
{
message + '呀!'}}柳小姐</h3> //你好呀!柳小姐
<!-- v-html会把html结构解析成标签,v-text无论内容是什么都只会解析成文本 -->
<p v-html="message"></p> //你好
<p v-text="message"></p> //你好
<p v-html="web"></p> //一个百度的链接
<p v-text="web"></p> //<a href='https://www.baidu.com'>百度</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
message: '你好',
web: "<a href='https://www.baidu.com'>百度</a>",
}
})
</script>
属性绑定指令(v-bind)
插值表达式只能使用在元素的文本节点上,不能使用在元素的属性节点中。所以可以使用该指令:v-bind 指令:为元素的属性动态绑定
属性值。语法糖为:
。操作元素的 class
列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute,所以可以用 v-bind
处理它们:只需要通过表达式计算出字符串结果即可。不过,字符串拼接麻烦且易错。因此,在将 v-bind
用于 class
和 style
时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。
<div id="app">
<img v-bind:src="imgSrc" width="270px" height="400px">
<!-- 语法糖(简写方法)-->
<img :src="imgSrc" width="270px" height="400px">
<!-- 此外,v-bind:class指令也可以与普通的class属性共存。以下结果:<div class="static active"></div>-->
<div class="static" :class="{ active: isActive, 'text-danger': hasError }"></div>
<!-- 表达式结果的类型是对象(对象语法)-->
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<div :style="styleObject"></div>
<div :class="[activeColor,width]"></div> <!-- 表达式结果的类型是数组(数组语法)-->
</div>
<!