本文主要是介绍2021-05-15，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

vue
https://www.jianshu.com/p/eff4eb93c902

	<div id="app">
		<input type="text" v-model="message" />
		{{message}}
	</div>
	<div class="app">
		<!-- <a v-bind:href="url">点我</a> -->
		<a :href="url">点我</a>
	</div>
	<div id="oks">
		<div v-if="ok">YES</div>
		<div v-else>NO</div>
	</div>
	<div id="appnv">
		<input type="radio" name="sex" value="男" v-model="gender" />男
		<input type="radio" name="sex" value="女" v-model="gender" />女
		<p>{{gender}}</p>
	</div>
	<div id="appcity">
		<select v-model="selected">
			<option value="">--请选择--</option>
			<option value="北京">北京</option>
			<option value="上海">上海</option>
			<option value="广州">广州</option>
		</select>
		<p>{{selected}}</p>
	</div>

	<script>
		var app = new Vue({
			el: "#appcity",
			data: {
				selected: ''
			}
		});

		var app = new Vue({
			el: "#appnv",
			data: {
				gender: ''
			}
		});

		var app = new Vue({
			el: "#jisuan",
			data: {
				count: 1
			},
			methods: {
				sub: function() {
					this.count -= 1;
				}
			}
		});
		var vue = new Vue({
			el: "#app",
			/*model数据*/
			data: {
				message: "hello,vue"
			}
		});

		var app = new Vue({
			el: '.app',
			data: {
				url: "https://www.baidu.com",
			}
		});

		var app = new Vue({
			el: "#oks",
			data: {
				ok: true,
			}
		});
	</script>
</body>

vue2 实例：

Vue实例

{{data+new Date()}}

模板语法

文本：{{text}}

组合表达式：

只渲染一次的文本:{{text}}

HTML代码：

属性: 禁用按钮

计算属性

单词：{{words}}

单词大写：{{toUpper}}

	<h1>条件渲染</h1>

	<div id="s4">
		<h3>v-if渲染会实际创建和销毁对象</h3>
		<p>分数是:<input type="text" v-model="mark" /></p>
		<p v-if="mark < 60">不及格</p>
		<p v-else-if="mark <80">及格</p>
		<p v-else="">优秀</p>
		<h3>v-show仅仅调用CSS display属性</h3>
		<button @click="toggleShow">改变show状态</button>
		<p v-show="show">可以看到我</p>
	</div>

</body>

<script>
	let vm4 = new Vue({
		el: '#s4',
		data: {
			mark: 80,
			show: true
		},
		methods: {
			toggleShow: function() {
				this.show = !this.show
			}
		}
	})


	let vm3 = new Vue({
		el: '#s3',
		data: {
			words: 'I love you'
		},
		computed: {
			toUpper: function() {
				return this.words.toUpperCase()
			}
		}
	});

	let vm1 = new Vue({
		el: '#s1',
		data: {
			data: '一些数据'
		}
	});
	let vm2 = new Vue({
		el: '#s2',
		data: {
			text: 1,
			html: '<del>666</del>',
			disabled: true
		},
		methods: {
			changeText: function(event) {
				this.text += 1
			}
		}
	})
</script>
</body>

这篇关于2021-05-15的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！