侧边栏壁纸
  • 累计撰写 793 篇文章
  • 累计创建 1 个标签
  • 累计收到 1 条评论
标签搜索

目 录CONTENT

文章目录

数据与方法

Dettan
2021-04-10 / 0 评论 / 0 点赞 / 178 阅读 / 387 字
温馨提示:
本文最后更新于 2022-07-23,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。
在单页组件里 this. 后面可以访问 data、prop、method 里的属性。注意嵌套的方法里的this不行,把this当参数传进去就好了。

使用js
{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div> 
vm.a == data.a // => true vm是一个vue实例,它俩的指向是一样的
初始化后再向data里添加的数据不是响应式的
vm.$data === data // => true
vm.$el === document.getElementById('example') // => true
数据使用
在标签尖括号里的
引号直接包裹:<div v-bind:class="color">,color是变量
在标签内的
用{{}}包裹:<p>{{ number + 1*10/3 }}</p>
方法使用
在尖括号里
@click="deleteEle(element)"
在标签里
{{reverse1()}}
		<div id="app">
			{{msg}}
			<p>Using mustaches: {{ rawHtml }}</p>
			<p v-html="rawHtml"></p>
			<div v-bind:class="color">test...</div>
			<p>{{ number + 1*10/3 }}</p>
			<p>{{ 1 == 1 ? 'YES' : 'NO' }}</p>
			<p>{{ message.split('').reverse().join('') }}</p>
			<p>{{reverse1()}}</p>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					msg: "hi vue",
					rawHtml: '<span style="color:red">this is should be red</span>',
					color: 'blue',
					number: 10,
					ok: 1,
					message: "vue"
				},
				methods:{
				reverse1:function(){
					return this.message.split('').reverse().join('')
				}}
			});
			vm.msg = "hi....";
		</script>
/////////////////////////////////////////////////////////////////////////////
var data = { a : 1 };
Object.freeze(data);//使这个对象不再响应式刷新view
var vm = new Vue({
	el   : "#app",
	data : data
});


0

评论区