Vue.js中“{{}}”的用法
Vue.js核心库只关注视图层,而我们只需要注重数据的操作就好,通过接下来的学习会更深的理解这句话,vue.js通过很多指令和修饰符来完成对视图的关注,第一个是{{}}<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewp...
·
Vue.js核心库只关注视图层,而我们只需要注重数据的操作就好,通过接下来的学习会更深的理解这句话,vue.js通过很多指令和修饰符来完成对视图的关注,第一个是{{}}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vue.js"></script> <!-- 使用vue.js需要先使用 -->
</head>
<body>
<div id="root">
<!-- 可以直接写变量-->
{{userName}}
<!-- 可以写三元表达式 -->
{{true?'男':'女'}}
<!-- 可以调用函数 功能是倒叙-->
{{userName.split("").reverse().join("")}}
</div>
</body>
<script>
new Vue({
el:'#root',//挂载的元素,只有在这个区域内才能使用Vue
data:{
userName:'仓央嘉措',
sex:"男",
num:1,
src:'http://img0.imgtn.bdimg.com/it/u=4150802370,1902002068&fm=11&gp=0.jpg',
str:'我是一只小小小鸟'
},//变量定义在里面
methods:{},//方法定义在这里面
filters:{},//过滤器
components:{},//组件
computed:{}//计算属性
})
</script>
</html>
执行结果:
更多推荐
已为社区贡献1条内容
所有评论(0)