uni-app中的数据绑定

uni-app中的数据绑定

1.定义数据

  在页面中需要定义数据，和我们之前的vue一摸一样，直接在data中定义数据即可

<script>
	export default {
		data() {
			return {
				flag: true,
				msg:'你好，uni-app',
				imageUrl: '../../static/logo.png',
				text: '<view>你好，李丝丝</view>'
			}
		},
		methods: {
			
		}
	}
</script>

2.数据绑定

2.1 插值表达式

    1).利用插值表达式渲染基本数据
    2).在插值表达式中使用三元运算
    3).基本运算

		<view >
			{{msg}}
		</view>
		<view >
			{{1+1}}
		</view>
		<view >
			{{flag ? '向左' : '向右'}}
		</view>

2.2 v-bind属性绑定指令

  在data中定义了一张图片，我们希望把这张图片渲染到页面上

	<image :src="imageUrl" mode="aspectFit"></image>

2.2 v-text等数据绑定指令

  uni-app 基本支持所有vue的数据绑定，像还有v-html， v-pre, 还有v-model双向绑定

		<view v-pre>
			{{text}}
		</view>
		<view v-html="text">
			
		</view>
		<view v-text="text">
			
		</view>