基本指令 在开标签中书写
v-html 解析html相关语法
在变量的内容 是一段甚至一大段带有标签的字符串时使用
v-html
<!-- //由于{{}}只能输出变量 ，有时候需要插入标签怎么办，
//可以使用v-html -->
<div id="myapp">
{{ooxx}}
<div v-html="message"></div>
<!-- //把message值 也就是H3标签插入当前div -->
</div>
<script>
var myapp = new Vue({
el: "#myapp",
data: {
ooxx: '普通的显示hello vue.js ',
message: "<h1>h1标签的显示i am not gay</h1>",
}
})
</script>
vue在渲染的过程中 如何 解决 快速刷新 出现 {{}} 的问题
第一种方式： v-text 直接输出文本 没有{{}} 就解决了闪屏问题
【v-text会覆盖使用标签内的内容】
<div id="app">
<div v-text='info'>哈哈哈哈哈哈</div>
【这个标签的内容会被info的内容覆盖】
<div>
<span>我的名字是：{{userInfo.name}}</span>
<span>我的年龄是： {{userInfo.age}}</span>
</div>
<div>
我的名字是：<span v-text='userInfo.name'></span>
</div>
</div>
<script>
new Vue({
el:'#app',
data:{//实际上写项目的时候 这个data赋值的内容 大都来自于接口（动态的）
info:'<h2>采菊东篱下</h2>',
title:'',//这个值是通过接口调取的
userInfo:{
name:'张大大',
age:5
}
}
})
</script>
v-bind
<!-- 动态数据绑定 v-bind: 可以简写成 ： -->
<div id="app">
<div>
<img v-bind:src="imgUrl" alt="">
没有简化的
</div>
<div>
<img :src="headUrl" alt="">
简化后的
</div>
<div>
<a v-bind:href="url">去购物</a>
</div>
<div>
<a :href="urlDetail" :title="name" >
title是规定元素的工具提示文本（tooltip text） 去学习</a>
</div>
</div>
<script>
new Vue({
el:'#app',
data:{//实际上写项目的时候 这个data赋值的内容 大都来自于接口（动态的）
imgUrl:'http://img4.imgtn.bdimg.com/it/u=3599075280,1682155658&fm=11&gp=0.jpg',
headUrl:'http://img1.imgtn.bdimg.com/it/u=1847821041,2132076028&fm=11&gp=0.jpg',
url:'http://www.jd.com',
urlDetail:'http://xue.ujiuye.com',
name:'穿云箭'
}
})
</script>