Vue.js学习之路（三）设置文本、绑定事件

一、设置标签的文本值——v-text

通过v-text可以对标签的属性值进行设置，把data中的定义的数据实时绑定在标签上，

但是如果标签内部有内容，是会把里边的内容覆盖哦。

调试下边的代码试试吧！

    
    


    

        
 
        
 你好！ 
        
你好！{
    {message}}  
    
    
    
    

当然对于v-text属性是可以使用字符串的拼接的，直接使用表达式的规则就可。

  //div部分  
    

        
  
        
 {
    {message+'我是'+name}} 
    
  //script部分 
    

 二、设置innerHTML——v-html

用法与v-text相似，只是对于赋给他的值如果是HTML结构，就可以直接解析成相应的结构。

  //div部分  
    

        
  
        
  
    
  //script部分 
    

三、绑定事件——v-on

书写方式：v-on：事件名="方法名"

简写方式：@事件名="方法名"

定义方法时写在methods里

下边的例子用的是最简单的单击事件，其他事件可以再官方文档中查看。

//div部分  
    

        
        
    
//script部分 
    

同样，函数也是可以传递参数的，用法同.net 语言，不再赘述。