与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. C#中的线程(一)入门 转载
			
    文章系参考转载,英文原文网址请参考:http://www.albahari.com/threading/ 转载:http://www.cnblogs.com/miniwiki/archive/2010 ...
    
			
    2. 
						
  2. 实现返回顶部-wepy小程序-前端梳理
			
    <script type="text/javascript" src="http://hovertree.com/ziyuan/jquery/jquery-1.11 ...
    
			
    3. 
						
  3. Tomcat单独部署,控制台乱码解决方法
			
    使用Tomcat作为容器,部署项目的时候,发现控制台总是乱码,乱码如下 打开Tomcat的部署目录 找到这一行,将UTF-8改成GBK java.util.logging.ConsoleHandler ...
    
			
    4. 
						
  4. [TJOI2019]甲苯先生和大中锋的字符串——后缀自动机+差分
			
    题目链接: [TJOI2019]甲苯先生和大中锋的字符串 对原串建后缀自动机并维护$parent$树上每个点的子树大小,显然子树大小为$k$的节点所代表的子串出现过$k$次,那么我们需要将$[len[ ...
    
			
    5. 
						
  5. 小程序 image跟view标签上下会有间隙
			
    图片文字等inline元素默许是跟父级元素的baseline对齐,而baseline又和父级底边有必定间距 我是使用: 加上这个消除了间隙,如果没有解决,你可以分别用 vertical-align:t ...
    
			
    6. 
						
  6. 关于bootstrap table 固定列宽
			
    首先为table 设置 style="table-layout: fixed;" <table id="assessStage" data-height= ...
    
			
    7. 
						
  7. Git 工作流
			
    一.分类 1.集中式工作流 像 SVN 一样,集中式工作流以中央仓库作为项目所有修改的单点实体.所有修改都提交到 Master 这个分支上. 这种方式与 SVN 的主要区别就是开发人员有本地库.Git ...
    
			
    8. 
						
  8. html5、手机端 input 单独打开相机、摄像头、录音功能
			
    相机:<input type="file" name="image" accept="image/*" capture="u ...
    
			
    9. 
						
  9. (转)MitmProxy+APPnium安装使用
			
    MitmProxy+APPnium安装使用 2019年08月19日 11:09:48 jiageibuuuyi 阅读数 61更多 分类专栏: python学习笔记   版权声明:本文为博主原创文章,遵 ...
    
			
    10. 
						
  10. sqlserver 动态sql执行execute和sp_executesql
			
    sp_executesql的运用 书写语法要点: exec sp_executesql @sql,N’参数1 类型1,参数2 类型2,参数3 类型3 OUTPUT’,参数1,参数2,参数3 OUTPU ...
    
			
    11.