vue.js计算属性基本用法

向右看齐 2021-10-19 02:56 274阅读 0赞

<!doctype html>
    <html>
    <head>
    <title>测试Vue.js</title>
    <meta charset = "utf-8">
    </head>
    <body>
    <div id="app">
    	{
       {name}}
    	<p v-html="content"></p>
    	<p> 计算属性:  {
       {ReversedMessage}}</p>
    	<input type="text" v-model="price"></input>
    	<p>值为watch: {
       {sum}} </p>
    	<p>值为computed: {
       {getData}} </p>
    </div>
    <script src = "vue.js"></script>
    <script>
    var vm = new Vue(
    	{
    		el:"#app",
    		data:
    		{
    			name : "xiaoming",
    			content:"<b>你好</b>",
    			price : 100,
    			sum : 0
    		},
    		
    		computed :
    		{
    			ReversedMessage : function()
    			{
    				return this.name.split('').reverse().join('')
    			},
    			getData: function(){
    				this.sum = this.price;
    				return this.sum;
    			}
    		},
    		//当变量发生变化时都会获取相应的操作使用watch,
    		//最好可以使用computed,因为计算属性有缓存,当值有变化时才去取值，这样可以直接写
    		watch:
    		{
    			price:function(newvalue)
    			{
    				this.price = newvalue;
    				this.sum = this.price;
    				console.log(this.price)
    			}
    		}
    		
    	}
    )
    </script>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，274人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue计算属性之：computed属性中的get与set用法

et：设置值时触发。 get：获取值时触发，与set是没有必然联系的。 <html> <head> <meta http-equiv="Con...

r囧r小猫/ 2024年04月18日 18:42/ 0 赞/ 34 阅读

相关 vue计算属性computed基本用法

计算属性computed案例：结果截图： ![在这里插入图片描述][20210123165928482.jpg_pic_center] `html代码如下：`

深碍√TFBOYSˉ_/ 2023年01月10日 05:04/ 0 赞/ 129 阅读

相关 git基本用法

一、git版本控制 svn、git 1.安装从官网上下载 https://git-scm.com/ 没有特殊要求的话，默认安装即可 2.配置用户信息

Myth丶恋晨/ 2022年12月02日 01:05/ 0 赞/ 185 阅读

相关 Vuejs computed set get计算属性

直接贴代码，看注释 <template> <div id="example"> <!-- 设置计算属性的绑定字段，即reversedMessage的计算属性

柔光的暖阳◎/ 2022年06月09日 12:12/ 0 赞/ 199 阅读

相关 VueJS极简教程之五：计算属性（computed）

VueJS的`computed`关键字主要用于定义一些通过其他属性计算出来的值，以下我们来着重介绍`computed`关键字的使用方法。定义方式 computed

深碍√TFBOYSˉ_/ 2022年04月21日 14:48/ 0 赞/ 225 阅读

相关 jqury属性用法

Attribute： $(”p”).addClass(css中定义的样式类型); 给某个元素添加样式 $(”img”).attr(\{src:”test.jpg”,al

以你之姓@/ 2022年04月08日 08:19/ 0 赞/ 178 阅读

相关 Vuejs computed get set 计算属性

直接看代码吧 \`\`\` <template> <div id="example"> <!-- 设置计算属性的绑定字段，即reversedMessa

电玩女神/ 2022年02月04日 11:15/ 0 赞/ 265 阅读

相关 vue.js计算属性基本用法

<!doctype html> <html> <head> <title>测试Vue.js</title> <meta charset

向右看齐/ 2021年10月19日 02:56/ 0 赞/ 275 阅读

相关 axios基本用法

一.axios 1.什么是axios axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端。简单的理解就是ajax的封装它本身具有

╰+哭是因爲堅強的太久メ/ 2021年09月15日 02:54/ 0 赞/ 465 阅读

相关 CompletableFuture基本用法

[https://www.cnblogs.com/cjsblog/p/9267163.html][https_www.cnblogs.com_cjsblog_p_9267163

骑猪看日落/ 2021年06月11日 15:13/ 0 赞/ 671 阅读