Vue常用指令

2020/12/14 23:46:29

Vue常用指令

1、v-text 改变指定元素的文本值
<span v-text="message">你是谁</span>
data{message:"你好 Vue!"}
你是谁 将会变成 你好 Vue!
与差值表达式的区别{ {}}

  • 差值表达式只会改变元素中的部分文本;而v-text改变的是全部

2、v-html 改变指定元素内的标签和文本
3、v-on 事件注册指令
v-on:click=“事件名(实参)” == @click=“事件名(实参)”

html<input type="button" name="" id="" value="获取" @click="text"/>

methods:{
   text:function(){
   }}

4、v-show 是否显示该元素(实质改变display)

  1. v-show=“true/false”
  2. v-show=“isshow” js部分 data:{isshow:true/false}
  3. v-show=“表达式” eg:v-show=“num != 0” js部分 data:{num:2}

5、v-if 跟v-show类似
不同点在于 实质的不同 v-show改变的是display
而v-if 是操作的dom树 在dom树上增添或删减

6、v-bind 改变属性值的指令
v-bind:src="" 等于:src=""

<img v-bind:src="imgArr[num]" >
data:{
   
			imgArr:[
						"../img/images/t_img1.jpg",
						"../img/images/t_img2.jpg",
						"../img/images/h_sear_03.gif"
					],
			num: 0
}
				

7、v-for 根据数据生成列表结构
8、v-model 数据的双向绑定
eg:在线笔记

<div id="app">
			<input type="text" name="" id="" value="" v-model="message" @keyup.enter="add"/>
			<ul>
				<li v-for="(item,index) in textArr">
					<span>{
  { index+1 }}、{
  { item }}</span>
					<span @click="remove(index)">x</span>
					</li>
			</ul>
			<p>{
  { textArr.length }}条  笔记<span @click="clear">clear</span></p>
			<span></span>
		</div>
var app = new Vue({
   
				el:"#app",
				data:{
   
					textArr:[],
				},
				methods:{
   
					add:function(){
   
						this.textArr.push(this.message)
					},
					remove:function(index){
   
						this.textArr.splice(index,1)
					},
					clear:function(){
   
						this.textArr.splice(0)
					}
				}
			})

在例子中:
v-for根据数组的长度,来生成li个数,
v-model html中的message 与 js中的message 进行数据的双向绑定