<script>
window.onload=function(){
var vm = new Vue({
el:"#app",
data:{
mesg:'hello world',
number:20,
Buer:false,
url:"www.baidu.com"
},
methods:{fnReverse:function(){
this.mesg=this.mesg.split('').reverse().join('')
}}
})
}
</script>
</head>
<body>
<div id="app">
<!-- mustache基本语法 -->
<span>{{mesg}}</span> <!-- 弹出hello world -->
<p>{{number+30}}</p> <!-- 弹出50 -->
<p>{{ Buer?'YES':'NO' }}</p> <!-- 三元运算式 --> <!-- 弹出NO -->
<p>{{ mesg.split('').reverse().join('') }}</p> <!--弹出 dlrow olleh-->
<!-- 如果是标签的属性要使用值，就不能使用“Mustache”语法，
需要写成使用v-bind指令： -->
<a v-bind:href="url">百度链接</a> <br><br>
<input type="button" value="反转" v-on:click="fnReverse"><br><br>
<!-- v-bind 和 v-on 可以简写成下面的形式 -->
<a :href="url">百度链接</a> <br><br>
<input type="button" value="反转" @click="fnReverse"><br><br>
</div>
</body>Vue.js的模板语法
猜你喜欢
转载自blog.csdn.net/longting_/article/details/80821773
今日推荐
周排行