(1)v-text:是元素的innerText,只能在双标签中使用
(2)v-html:是元素的innerHTML,不能包含{{xxx}}
(3)v-if:元素是否插入或者移除
(4)v-show:元素是否显示或者隐藏
(5)v-model:双向数据绑定
(6)v-bind:单项数据绑定
注:innerText和innerHTML解释:
<span id='span_id'><p>这是文本内容</p></span>
document.getElementById('span_id').innerText;//这是文本内容
document.getElementById('span_id').innerHTML;//<p>这是文本内容</p>
document.getElementById('span_id').innerText=“<p>这是文本内容</p>”;//<p>这是文本内容</p>
document.getElementById('span_id').innerHTML=“<p>这是文本内容</p>”;//这是文本内容
(7)v-bind的用法:v-bind:属性名=“表达式”;
简写方式---:属性名=“表达式”
例子:<span v-bind:class="变量?red;green">文本内容</span>
(8)v-on的用法:v-on:属性名=“表达式||函数名”;
简写方式----@属性名=“表达式||函数名”
例子:<button v-on:click="change()">请点击</button>;
<button @click="change">请点击</button>--函数没有参数可以省略();
注意:change()是vue中定义的methods中的方法。
(9)v-for的使用:
*可以使用操作数组(item,index)
*可以使用操作对象(value,key,index)
<div>
<ul>
<li v-for="stu in stus">
stu:{{stu}}
</li>
<li v-for="(stu,index) in stus">
index:{{index}}
stu:{{stu}}
</li>
<li v-for="(stu,index) in stus" :key="index">
index:{{index}}
stu:{{stu}}
</li>
</ul>
<ul>
<li v-for="(val,key) in person" >
value:{{value}}
key:{{key}}
</li>
<li v-for="(val,key,index) in person" :key="index">
value:{{value}}
key:{{key}}
index:{{index}}
</li>
</ul>
</div>
<script>
export default{
data(){
return{
stus:[{name:'li',age:20},{name:'wang',age:30}],
person:{name:'zhang',sex:'男'}
}
}
}
</script>