基本指令 在开标签中书写
在变量的内容 是一段甚至一大段带有标签的字符串时使用
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>
第一种方式: 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: 可以简写成 : --> <div id="app"> <div> <img v-bind:src="imgUrl" > 没有简化的 </div> <div> <img :src="headUrl" > 简化后的 </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>