Vue:本地应用-计数器

2022-6-24

v-text指令

设置标签的文本值

	<body>
		<div id="app">
			<h2 v-text="message+'拼接的字符串'">不显示</h2>
			<h2 v-text="info+'拼接的字符串'">不显示</h2>
			<h2>{{message+'拼接的字符串'}}----显示</h2>
		</div>
	</body>
	<!-- 开发环境版本，包含了有帮助的命令行警告 -->
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script>
	  var app = new Vue({
		  el:"#app",
		  data:{
			  message:"tinstu",
			  info:"TTTTT"
		  }
	  })
	</script>

结果:

tinstu拼接的字符串
TTTTT拼接的字符串
tinstu拼接的字符串----显示

v-html指令

设置标签的innerHTML 解析html代码

	<body>
		<div id="app">
			<p v-html="content"></p>
			<p v-text="content"></p>
		</div>
	</body>
	<!-- 开发环境版本，包含了有帮助的命令行警告 -->
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script>
	  var app = new Vue({
		  el:"#app",
		  data:{
		      content:"<a href='https//:www.tinstu.com'>Tin</a>"
		  }
	  })
	</script>

v-on指令

为元素绑定事件

绑定的方法定义在methods属性中
方法内部通过this关键字可以访问定义在data中的数据

	<body>
		<div id="app">
			<input type="button" value="v-on指令" v-on:click="doIt" />
			<input type="button" value="v-on简介" @click="doIt" />
			<input type="button" value="双击事件" @dblclick="doIt" />
			<h2 @click="changeFood">{{food}}</h2>    //
		</div>
	</body>
	<!-- 开发环境版本，包含了有帮助的命令行警告 -->
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script>
	  var app = new Vue({
		  el:"#app",
		  data:{
		      food:"西蓝花"
		  },
		  methods:{
			  doIt:function(){
				  alert("doit666")
			  },
			  changeFood:function(){
				  this.food+="好吃！"
			  }
		  }
	  })
	</script>

计数器案例

	<body>
		<div id="app">
			<button @click="add">+</button>
			<span>{{num}}</span>
			<button @click="sub">-</button>
		</div>
	</body>
	<!-- 开发环境版本，包含了有帮助的命令行警告 -->
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script>
       var app = new Vue({
		   el:"#app",
		   data:{
			   num:1
		   },
		   methods:{
			   add:function(){
				   this.num++;
			   },
			   sub:function(){
				   if(this.num>1){
					   this.num--
				   }else{
					   alert("最小为1")
				   }
			   }
		   }
	   })
	</script>

阅读剩余

作者：Tin

链接：http://www.tinstu.com/2128.html

文章版权归作者所有，未经允许请勿转载。

THE END