Vue 基础指令学习

<template>
<!--只能有一个根节点 -->
<div>
<pre>
*v-text 是元素的innertext 只能在双标签中使用
*v-html 是元素的innerHTML，不能包含<!-- {{xxx}} -->
*v-if 元素是否移除或者插入
*v-show 元素隐藏或者显示
*v-model 双向数据绑定
</pre>
// v-text
<span v-text="text"></span>
<hr>
<span v-html="html"></span>
v-if:
<div v-if="isShow" style="height:100px;background:#562366;"></div>
v-show:
<div v-show="isShow" style="height:100px;background:#333;"></div>
v-model:
<input type="text" name="" v-model="mText">
{{mText}}
<!-- 给下面的input的value赋值用v-bind：value -->
<br>
<input type="text" name="" v-bind:value="mText">
</div>
</template>
<<script>
export default {
data(){
return {
text:'我是v-text玩的东西',
html:`
<ul>
<li>vksdnkfndk </li>
<li>kbnskdfkb </li>
</ul>
`,
isShow:false,
mText:'' }
}
}
</script>