vue 指令

Vue.js中的数据绑定与DOM操作

最新推荐文章于 2023-01-10 14:55:13 发布

原创最新推荐文章于 2023-01-10 14:55:13 发布 · 160 阅读

0 ·

CC 4.0 BY-SA版权

本文深入探讨了Vue.js框架中数据绑定的各种方法，包括v-html、v-text和v-bind指令的使用，以及它们如何帮助实现MVVM模式下的数据驱动。详细介绍了属性、类名和样式的绑定技巧，通过实例展示了如何利用Vue实现动态页面效果。

指令的目的是做什么： 操作DOM

    解释 : MVVM    vm -> v    数据驱动
    
	1. v-html   转义输出，也就是可以解析 xml 数据
	2. v-text： 非转义输出，也就是无法解析  xml 类型数据
	3. v-bind 
	   - 将数据和属性进行单向数据绑定： 将vue中数据赋值给属性值
	   
			<img v-bind:src = "src" />
			<div v-bind:class = "">
			    
			</div>
			<div v-bind:style = "">
			    
			</div>
			
		    简写形式
		    
		    <img v-bind:src="src" alt="">
			<img :src="src" alt="">

			1. - 类名绑定
     - 用法
       - 对象形式用法
                 <p :class = "{ bg: true,size: true }"></p>
                 <p :class = "{ bg: true,size: false }"></p>
                 <p :class = "{ [classA]: true,[classB]: true }"></p>
       - 数组形式用法
                 <p :class = "[ 'size','bg' ]"></p>
                 <p :class = "[ classA,classB ]"></p>
                 <p :class = "[ classA,classB,5>3?'a':'b']">  </p>
         
		  2 - 样式绑定
		     - 用法
		       - 对象形式用法
		             <p :style = "{width: '100px',height: '100px',background: 'yellow'}"></p>
		             <p :style = "styleObj"></p>
		       - 数组形式用法
		             <p :style = "[{width:'100px',height: '100px'},{ background: 'green'}]"></p>
		             <p :style = "[size,bg]"></p>