本文共 3043 字，大约阅读时间需要 10 分钟。

v-text指令

本质上就是一个表达式的命令，用于直接对数据进行渲染

等价于

{
   {
    massage }}

区别在于v-text当中的数据会对原本标签里面的文本进行覆盖，而后者不会，并且前者进行字符串的拼接使用+'hello'这种模式，后者直接加在大括号后面即可

v-html指令

设置标签的innerHTML

如果显示的是简单的文本，与v-text没有区别

但是v-html还可以对html代码进行解析渲染

设置code值为代码块

code:"a标签",

使用v-html进行解析，会出现一个a标签的超链接

v-on指令

为元素绑定事件

在使用v-on进行事件绑定，事件名不需要on。如下代码所示。给input标签绑定一个单击事件：

或者使用@符号进行简化，如下所示

事件绑定之后，方法执行写在methods当中：如下所示

var app=new Vue({
   		el:"#app",		methods:{
   			doIt:function(){
   				alert("do It")			}			},		})

事件绑定之后在浏览器中单击查看结果。

改变元素的值

表示在单击某一个文本之后，修改这个文本的值。如何实现？

首先在data当中给定这个变量绑定值

data:{
   		food:"腐竹"	}

把这个属性值渲染到页面当中并且绑定一个单击事件

{
   {
   food}}

最后编写单击事件的方法，在这里使用this.food就可以获取到当前这个food对象的值。所以，直接对this.food进行修改即可！

changeFood:function(){
   		this.food+=" ! "	}

计数器案例实现

在浏览器当中有一个加号与减号，每按一次加号，数字加一，按一次减号，数字减一，且这个数只能在0-10之间，可以取到0和10；

第一步：编写前端显示的代码，两个按钮和一个显示数字的区域，数字直接从data当中渲染即可。并且对不一样的按钮绑定两个事件。

   
	
    -	
    {
   {
   num}}	
    +
   

第二步：添加单击事件的逻辑代码：

methods:{
   		reduce:function(){
   			if(this.num>0){
   				this.num--;			}else{
   				alert("这是最小值")			}				},		add:function(){
   			if(this.num<10){
   				this.num++;			}else{
   				alert("这是最大值")			}		}	},

之后直接在浏览器当中查看效果，如下图所示

v-show

表示当前是否显示，使用true和false进行判断。

在这里要实现一张图片，再定义一个按钮，当每按一次按钮，修改图片是否显示。 先定义图片与按钮并显示到浏览器当中，给按钮添加一个单击事件的方法。v-show的值在data当中定义isShow:true,

只需要在methods当中修改isShow的值即可

methods:{
   	changeisShow:function(){
   		this.isShow=!this.isShow	},}

其次再添加一个只有当年龄大于18之后才能够查看的图片，同理，先在data当中给定age属性，如：age:15 ，同理在div当中添加图片给定设置

当每按一次按钮之后age加一，这样之后当age的值大于18之后就可以显示第二张图片了。添加方法到methods当中，如下所示

AddAge:function(){
   	this.age++,	alert(this.age)}

最后看一下效果图：

v-if指令

效果与v-show一致，区别在于v-if是对标签代码进行删除还是添加。

与v-show大体一致的效果，代码如下所示：在按钮每单击一次之后修改值，即是否显示p标签

			
   		
   				
   						
   
			
    
p标签
			
    
可以切换的p标签
			
    切换		
   
			

v-bind指令

表示对标签属性进行绑定，如class 、src等

示例：在data当中将属性值进行保存，如下：

data: {
   	imgsrc: "../img/1.png",	imgtitle: "靓仔",}

使用v-bind进行绑定：

在这里可以对v-bind进行省略，使用一个冒号即可

而对于类名class，通常使用一个逻辑类型的变量进行表示该class类名是否生效，先在data当中定义

isActive: true

然后在这里class可以使用一个三元表达式进行获取，而绑定一个单击事件对isActive的值进行来回切换

除了使用三元表达式，还可以直接使用对象获取isActive，这样相对于来说比较简洁

把toggleisActive写在methods当中：

methods: {
   	toggleisActive: function() {
   		this.isActive = !this.isActive	}},

并且在这里对active这个class添加一个样式，放在style标签当中，添加一个边框即可

border: red 2px solid;

运行项目查看效果，在单击之后这个红色边框会进行切换，实质上就是active这个class是否给定、

v-for指令

用于列表的多个渲染，如我们可以直接使用v-for获取数据渲染多个列表。可以对数组、对象进行渲染，并且我们可以添加两个按钮，绑定增加与删除对象当中的数据。具体代码如下所示：

			
   								
   
			
    
     
索引 {
   {
   index}} 值 {
   {
   item}}
    
			
    
{
   {
   item.name}}
			
    			
    		
   
			

运行查看效果：

v-model指令

双向绑定值，用于表单的数据绑定与修改。测试代码如下：输入框最开始会获取message的值进行放置，在输入框当中修改值之后，message的值也会进行修改，最后还在按钮当中定义一个方法用于直接修改message的值。

			
   		
   				
   						
   
			
    			{
   {
   message}}			
    
			
    		
   
			

运行查看结果：

网页记事本的开发

增加、删除、清空、统计条数 功能模块，

			
   										
   
			
    
				
     				
     
					
      
       {
   {
   index+1}} .   {
   {
   item}}					
       
      
				
     
				
     				
     共 {
   {
   messageArr.length}} 条记录			
    
		
   
			

查看效果

转载地址：http://kzqzi.baihongyu.com/