Vue指令
- v-text: 设置标签的文本值(内部支持写表达式)
<div id="app">
<h2 v-text="message"></h2>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"</script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"Vue text"
}
})
</script>
如果v-text所修饰标签内部增加元素,页面效果不变
这样可以改变
- v-html: 设置标签的innerHTML
- v-on: 为元素绑定事件(v-on: 可替换为@)
语法
<body>
<div id="app">
<h1> {{ food }} </h1>
<input type="button" value="改变食物" @click="changeFood">
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
methods: {
doF:function(){
alert("v-on!!!");
},
changeFood:function(){
//alert(this.food)
this.food="炒鸡蛋"
}
},
data:{
food:"西红柿",
}
})
</script>
</body>
总结
- 本地应用-计数器
<body>
<div id="app">
<h1> {{ num }} </h1>
<button @click="sub">-</button>
<button @click="add">+</button>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
methods: {
add: function () {
if (this.num < 5)
this.num++;
else
alert("太大了")
},
sub: function () {
if (this.num > 0)
this.num--;
else
alert("太小了")
}
},
data: {
num: 0,
}
})
</script>
</body>
1792
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
