vue有三种数据绑定方式

第一种插值表达式{{}}:原值是什么，它输出内容就是什么，简单的来就是纯文本，第二种v-html  ：会把值中的标签给解析，并输出到页面。第三种 v-text:此页面显示与{{}}一样，但不会像{{}}没载出来有双大括号显示。

v-vue字符串类型

用法

html代码

<div id="app">

<p v-text="message"></p>

</div>

vue.js代码

new Vue({

el:"#app",

data:{

message:"<h1>我们都要好好的</h1>"

}

})

v-text：是字符串类型

v-html

用法

html代码

<div id="app">

<p v-html="message"></p>

</div>

vue.js代码

new Vue({

el="#app",

data:{

message:"<h1>我们都要好好的</h1>"

}

})

v-show:类型为普通类型，用于根据表达式真假值，来对class进行切换display属性。

用法

html 代码

<div id="app">

<p v-show="oh"></p>

</div>

js代码

new Vue({

el:"#app",

data:{

ok:false   //此值可为true和false，true时display为显示，false时display为none.

}

})

v-if类型为普通类型，用于根据表达式的直假值，来进行对此元素渲染或者重建。

用法

html代码

<div id="app">

<template v-if="on">

<p v-if="seen">我这时是有数据的</p>

<p>abcdefg</p>

</template>

</div>

<script>

new Vue({

el:"#app",

data:{

on:true

}

})

</script>

后续补充

vue-指令