与mustache相区别，他是对内容（content内部）进行修改的。v-bind的语法糖写法是   ：

v-bind 动态绑定class属性：v-bind：class="对象名"。/v-bind：class=‘['数组']’

v-bind：class=“{键1：‘值1’，键2：‘值2’}”        Vue在解析的时候，key可以不用加单引号当做字符串进行处理，value加上单引号，当成变量值进行处理；

<body>
<div id="app">
    <ul>
        <li v-for="(item,index) in items" :style="aaa">{{index}}-{{item}}</li>
        <li v-for="(item,index) in items" :style="[background,background1]">{{index}}-{{item}}</li>
    </ul>
</div>
<script>
    const vm=new Vue({
        el:'#app',
        data:{
            id:1,

            name:'Vue',
            avatar:"http://pic44.nipic.com/20140723/18505720_094503373000_2.jpg",
            count:[1,2,3,4,5],
            items:["海王","火影忍者","海贼王","进击的巨人"],
            active:'active',
            aaa:{
                color: 'chocolate' ,
                fontSize:"100px"

            },
            background:{
                color:"blue"
            },
            background1:{
                fontSize: "100px"
            }
        },
        method:{

        }
    })
</script>

//计算属性
<body>
<div id="app">
    <p>{{fullname}}</p>
    <p>{{fullname1()}}</p>
</div>
<script>
    const vm=new Vue({
        el:'#app',
        data: {
            data1:"我是",
            date2:"曹润芝"
        },
        methods:{
          fullname1(){
              return this.data1+this.date2;
          }
        },
        computed:{
          fullname:function () {
              return this.data1+this.date2;
          }
        }
    })
</script>
<body>
<div id="app">
    <p>总价格：{{totalprice}}</p>
</div>
<script>
    const vm=new Vue({
        el:'#app',
        data: {
            books:[{id:110, name:"编程应用0", price:119},
                    {id:111, name:"编程应用1", price:119},
                    {id:112, name:"编程应用2", price:119},
                    {id:113, name:"编程应用3", price:119},
                    {id:114, name:"编程应用4", price:119},
            ]
        },
        computed:{
            totalprice:function () {
                let result=0;
                for (let i=0;i<this.books.length;i++){
                    result+=this.books[i].price;
                }
                return result;
            }
        }
    })
</script>
</body>
												


											
v-bind    绑定属性的更多相关文章
	

    
						
  1. 背水一战 Windows 10 (22) - 绑定: 通过 Binding 绑定对象, 通过 x:Bind 绑定对象, 通过 Binding 绑定集合, 通过 x:Bind 绑定集合
		
    [源码下载] 背水一战 Windows 10 (22) - 绑定: 通过 Binding 绑定对象, 通过 x:Bind 绑定对象, 通过 Binding 绑定集合, 通过 x:Bind 绑定集合 作 ...
    
		
    2. 
						
  2. 背水一战 Windows 10 (21) - 绑定: x:Bind 绑定, x:Bind 绑定之 x:Phase, 使用绑定过程中的一些技巧
		
    [源码下载] 背水一战 Windows 10 (21) - 绑定: x:Bind 绑定, x:Bind 绑定之 x:Phase, 使用绑定过程中的一些技巧 作者:webabcd 介绍背水一战 Wind ...
    
		
    3. 
						
  3. 绑定: x:Bind 绑定, x:Bind 绑定之 x:Phase, 使用绑定过程中的一些技巧
		
    背水一战 Windows 10 之 绑定 x:Bind 绑定 x:Bind 绑定之 x:Phase 使用绑定过程中的一些技巧 示例1.演示 x:Bind 绑定的相关知识点Bind/BindDemo.x ...
    
		
    4. 
						
  4. 绑定: 通过 Binding 绑定对象, 通过 x:Bind 绑定对象, 通过 Binding 绑定集合, 通过 x:Bind 绑定集合
		
    背水一战 Windows 10 之 绑定 通过 Binding 绑定对象 通过 x:Bind 绑定对象 通过 Binding 绑定集合 通过 x:Bind 绑定集合 示例1.演示如何通过 Bindin ...
    
		
    5. 
						
  5. 第11课 std::bind和std::function（2）_std::bind绑定器
		
    1. 温故知新:std::bind1st和std::bind2nd (1)bind1st.bind2nd首先它们都是函数模板,用于将参数绑定到可调用对象(如函数.仿函数等)的第1个或第2个参数上. ( ...
    
		
    6. 
						
  6. [十六]SpringBoot 之 读取环境变量和绑定属性对象
		
    1.读取环境变量 凡是被spring管理的类,实现接口EnvironmentAware 重写方法 setEnvironment 可以在工程启动时,获取到系统环境变量和application配置文件中的 ...
    
		
    7. 
						
  7. WPF Bind 绑定
		
    原文:WPF Bind 绑定 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/koloumi/article/details/74332515 用过W ...
    
		
    8. 
						
  8. jquery中bind()绑定多个事件
		
    bind()绑定事件 $(selector).bind(event,data,function): 参数event为事件名称(如"click,mouseover....."),da ...
    
		
    9. 
						
  9. Compounding绑定属性
		
    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
    
		
    10. 
						
  10. class中限定绑定属性__slots__方法
		
    使用__slots__但是,如果我们想要限制class的属性怎么办?比如,只允许对Student实例添加name和age属性.为了达到限制的目的,Python允许在定义class的时候,定义一个特殊的 ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. Vuex框架原理与源码分析
			
    Vuex是一个专为Vue服务,用于管理页面数据状态.提供统一数据操作的生态系统.它集中于MVC模式中的Model层,规定所有的数据操作必须通过 action - mutation - state ch ...
    
			
    2. 
						
  2. 主席树K-th Number
			
    /*K-th NumberTime Limit: 20000MS Memory Limit: 65536KTotal Submissions: 44535 Accepted: 14779Case Ti ...
    
			
    3. 
						
  3. fopen 的mode
			
    转自 http://blog.csdn.net/todd911/article/details/8976543 r 打开只读文件,该文件必须存在. r+具有读写属性,从文件头开始写,保留原文件中没有被 ...
    
			
    4. 
						
  4. pandas 筛选某一列最大值最小值 sort_values、groupby、max、min
			
    高效方法: dfs[dfs['delta'].isnull()==False].sort_values(by='delta', ascending=True).groupby('Call_Number ...
    
			
    5. 
						
  5. Jenkins 获取 Git 的提交记录（Change Log）
			
    工作中用 Jenkins 做 iOS 和 Android 的持续集成,之前实现的是当 git 有新代码提交的时候,就会自动编译并上传安装包到蒲公英,然后自动发送QQ群通知或者讨论组通知给相关小伙伴,方 ...
    
			
    6. 
						
  6. 2018-2019-2 网络对抗技术 20165202 Exp7 网络欺诈防范
			
    博客目录 一.实践目标 二.实践内容 简单应用SET工具建立冒名网站 (1分) ettercap DNS spoof (1分) 结合应用两种技术,用DNS spoof引导特定访问到冒名网站.(1.5分 ...
    
			
    7. 
						
  7. Deep & Cross Network总结
			
    一.介绍 CTR预估全称是Click Through Rate,就是展示给用户的广告或者商品,估计用户点击的概率.公司规模较大的时候,CTR直接影响的价值在数十亿美元的级别.广告支付一个非常流行的模型 ...
    
			
    8. 
						
  8. qt mvc2
			
    继续上次的例子,对于list才说只有行,讨论列是没有意义的. bool insertRows(int row, int count, const QModelIndex &parent); b ...
    
			
    9. 
						
  9. 关于linux下的系统存储管理
			
    https://blog.csdn.net/aaaaaab_/article/details/80159871 //查看当前系统磁盘使用空间 df -h //查看当前目录文件占用空间大小 du -sh ...
    
			
    10. 
						
  10. C# 读取文件内容
			
    读取文件内容有三种方式 全部读取到字符串变量中 一次读取一行 全部读取到字符串数组中,每个数组元素存储一行文本 全部读取到字符串变量 string text = System.IO.File.Read ...
    
			
    11.