Vue.js-----轻量高效的MVVM框架（三、认识数据绑定）-白红宇

Vue.js-----轻量高效的MVVM框架（三、认识数据绑定）

阅读量：5994 次

发布时间：2019-06-20

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

插值

1、文本插值

（1）双向数据绑定

v-model="msg0101"，一旦v-model中的数值发生变化，所有用vue表达式{

{msg0101}}的数据都会更新。

（2）单次插值

v-model="msg0102"，但是：如果我们仅仅需要显示msg0102初始化的值，则用{

{#msg0102}}取值，这样，即便model中的数值发生变化，我们这里取出来的还是最原先的值。

（3）html文本的显示与转义

{

{}}双大括号默认显示的是在data中定义的字符串，即便是html文本，也会原样输出。

例如，我们在data中定义了msgHtml：'<span style="color:red; ">helloworld</span>'，为了在页面中也显示的是html代码，我们只需要正常取值就ok：{

{msgHtml}}

但是，如果我们要将我们的字符串文本在页面显示为正常的文档流，则用三大括号{

{

{msgHtml}}}输出，页面显示的就是helloworld。span标签已经显示在文档流中了

（4）html特性（双大括号标签也可以用在 HTML 特性 (Attributes) 内）


         
              当前元素ID：item-{
   {item.itemId}} 。index:{
   {$index}}; itemName:{
   {item.itemName}}; itemDesc:{
   {item.itemDesc}}

data:{
    　　items: [{　　    itemId: "itemId01 ",　　    itemName: "itemName01 ",　　    itemDesc: "itemDesc01 "　　}, {　　    itemId: "itemId02 ",　　    itemName: "itemName02 ",　　    itemDesc: "itemDesc02 "　　}, {　　    itemId: "itemId03 ",　　    itemName: "itemName03 ",　　    itemDesc: "itemDesc03 "　　}, ]

结果展示：

2、绑定表达式插值

在 Vue.js 中，一段绑定表达式由一个简单的 JavaScript 表达式和可选的一个或多个过滤器构成。

（1）javascript表达式

二元表达式

在data中定义

data: {　　number01: 10,　　number02: "10",}

{

{number01+1}}渲染后：11（数值类型二元运算）

{

{number02+1}}渲染后：101（数值类型与字符串类型相加，先将数值类型转化为字符串，然后拼接字符串）

三元表达式

data中初始化四个数值

data: {    ok01: true,    ok02: false,    ok03: "hello ",    ok04: "",}

div中的表达式判断

ok01 is true: {
   {ok01?"ok01":"cancel01"}}
ok02 is false: {
   {ok02?"ok02":"cancel02"}}
ok03 is "hello": {
   {ok03?"ok03":"cancel03"}}
ok04 is "": {
   {ok04?"ok04":"cancel04"}}

注意：在三元表达式中{

{isOk?"yes":"no"}}表达式相当于下面的条件判断

if(isOk){
    　　//如果isOk是string类型，isOk未定义或者isOk是空字符串，则执行return "no"，否则执行return "yes"。 　　//如果isOk是number类型，isOk未定义或者isOk的值为0，则执行return "no"，否则执行return "yes"。　　return "yes";}else{　　return "no";}

使用js函数

在data中初始化数据msg01

data: {    msg01: "this is message01"}

在vue绑定的标签中写入

this is message01在表达式中倒序: {
   {msg01.split("").reverse().join("")}}

结果展示：

this is message01在表达式中倒序: 10egassem si siht

（2）过滤器

官方过滤器API：

在data中定义数组fItems:

fItems: [{    name: "《精通Spring》",    price: "38.80"}, {    name: "《精通Hibiernate》",    price: "28.80"}, {    name: "《精通Jquery》",    price: "25.99"}, {    name: "《精通Vue》",    price: "18.88"}]

在vue绑定的标签内引用过滤器（lowercase：将所有字母变为小写，currency：指定货币符号）


         
              name: {
    {item.name|lowercase }}; price:{
    {item.price|currency "$"}}

结果展示：

完整html代码如下：

            
                     数据绑定                插值
        
                 
      #文本
            
      双向数据绑定
            
                  
      {
   {msg0101}}
            
      单次插值
            
                  
      {
   {*msg0102}}
            
      
            
      #原始html文本：
            
      双大括号: {
   {msgHtml}}
      msg是什么就输出什么，不会转义            
      三大括号: {
   {
   {msgHtml}}}
      msg会发生转义"<"输出"<"，"{
    {msgLt}}"输出"<"            
      
            
      #html特性（Mustache 标签也可以用在 HTML 特性 (Attributes) 内：）
            
                      
                           当前元素ID：item-{
   {item.itemId}} 。index:{
   {$index}}; itemName:{
   {item.itemName}}; itemDesc:{
   {item.itemDesc}}                
            
      
        
     
        
     
        
                 
      #绑定表达式
            
                      
       JavaScript表达式
                
                           
        10+1: {
   {number01+1}}
                    
        "10"+1: {
   {number02+1}}
                
       
                
                           
        ok01 is true: {
   {ok01?"ok01":"cancel01"}}
                    
        ok02 is false: {
   {ok02?"ok02":"cancel02"}}
                    
        ok03 is "hello": {
   {ok03?"ok03":"cancel03"}}
                    
        ok04 is "": {
   {ok04?"ok04":"cancel04"}}
                
       
                
                           
        this is message01在表达式中倒序: {
   {msg01.split("").reverse().join("")}}
                
       
                
                       
                       
                       
                       
                       
                       
                       
                       
                   
      
            
      
            
      过滤器
            
                      
       
                            示例01：{
    {
    {fMsg01}}}                    
                                message是表达式，capitalize是过滤器                    
                
       
                
       
                            示例02：{
    {
    {fMsg02}}}                    
                                过滤器可以串联                    
                
       
                
       
                            示例03：{
    {
    {fMsg02}}}                    
                                过滤器可以接受参数，过滤器函数始终以表达式的值作为第一个参数。带引号的参数视为字符串，而不带引号的参数按表达式计算。这里，字符串 'arg1' 将传给过滤器作为第二个参数，表达式 arg2 的值在计算出来之后作为第三个参数。                    
                
       
                
                           
        过滤器使用
                    
                                
                                     name: {
    {item.name|lowercase }}; price:{
    {item.price|currency "$"}}