首页 > 代码库 > vue-指令

vue-指令

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-指令